flexDirection：'row'squishes组件

Question

我在TextView中有一个View。它看起来像这样：

+----------+
|TextInput |
+----------+
|          |
|          |
+----------+

但是只要我将flexDirection: 'row'置于View的样式中，它就像这样

+----------+
|Tex|      |
+----------+
|          |
|          |
+----------+

基本上，该设置将TextInput移动到更小的宽度。我该如何规避这个？

代码， 这是最佳图片：

<TextInput />

这是底部：

<View style={{flexDirection: 'row'}}>
  <TextInput />
</View>

Answer 1

如果您希望输入填充整个视图，请使用：

<TextInput style={{flex: 1}} />

如果您希望文本具有特定宽度，请使用：

<TextInput style={{width: 100}} />

请参阅此example