Jak zdefiniować szerokość według procentów w reakcji natywnej?

Question

Próbuję utworzyć widok z otaczającą go ramką, która jest wyśrodkowana i wypełnia 80% ekranu. Zrobiłem to:

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

który działa, ale wydaje się strasznie gadatliwy.

Czy istnieje lepszy (bardziej zwięzły) sposób tworzenia widoku, który jest określonym procentem szerokości ekranu i wyśrodkowany na stronie?

Answer 1

UPDATE:

Począwszy od React Native wersji 0.42 teraz mamy pełne wsparcie procentową dla width, height, padding i tak dalej, zobacz pełną listę i przykłady tutaj: https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11

Stara metoda:

Rozważ użycie Dimensions, np .:

import Dimensions from 'Dimensions'; 

a następnie w elementu stylu:

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

przykład roboczych: https://rnplay.org/apps/4pdwlg