Как определить ширину в процентах в ответном нативном?

Question

Я пытаюсь создать представление с рамкой вокруг него, которая центрирована и заполняет 80% экрана. Я пришел к следующему:

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

который работает, но кажется ужасно подробным.

Есть ли лучший (более сжатый) способ создать представление, которое является определенным процентом ширины экрана и центрируется на странице?

Answer 1

UPDATE:

Начиная от React Native версии 0.42 теперь мы имеем полную процентную поддержку width, height, padding и так далее, увидеть полный список и примеры здесь: https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11

Старый метод:

Рассмотрите возможность использования Dimensions, например:

import Dimensions from 'Dimensions'; 

, а затем в стиле элемента:

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

Рабочий пример: https://rnplay.org/apps/4pdwlg