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
