javascript - Hur man definierar bredd i procent i React Native?


Jag försöker skapa en vy med en ram runt den som är centrerad och fyller 80% av skärmen. Jag har kommit fram till detta:

<View style={{flexDirection: 'row'}}>
  <View style={{flex: .1}} />
  <View style={{flex: .8, borderWidth: 2}} />
  <View style={{flex: .1}} />
</View>

vilket fungerar, men verkar otroligt ordrikt.

Finns det ett bättre (mer kortfattat) sätt att skapa en vy som är en viss procent av skärmens bredd och centrerad på sidan?

Svar #1

UPPDATERING:

Från och med React Native version 0.42 har vi nu ett fullständigt procentstöd för width, height, padding och så vidare, se den fullständiga listan och exempel här: https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11

Gammal metod:

Överväg att använda Dimensions, som:

import Dimensions from 'Dimensions';

och sedan i elementets stil:

width: Dimensions.get('window').width / 100 * 80,

Exempel som fungerar: https://rnplay.org/apps/4pdwlg