javascript - 如何在 React Native 中按百分比定义宽度？

Question

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

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

这有效，但看起来非常冗长。

是否有更好(更简洁)的方法来创建占屏幕宽度一定百分比并位于页面中心的 View ？

Answer 1

更新:

从 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