如何定义反应原生的宽度百分比？

Question

我正在尝试创建一个带有边框的视图,该视图居中并填充屏幕的80%.我想出了这个:

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

哪个有效,但看起来非常冗长.

是否有更好(更简洁)的方法来创建一个视图,该视图是屏幕宽度的一定百分比并以页面为中心？

Answer 1

更新:

从阵营原生版本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