Question

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

<View style={{flexDirection: 'row'}}>
  <View style={{flex: .1}} />
  <View style={{flex: .8, borderWidth: 2}} />
  <View style={{flex: .1}} />
</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

如何在native native中定义宽度百分比？

1 个答案: