React Native：如何将 <TextInput/> 的高度和宽度设置为 <View/> 容器？

Posted 2023-02-21

【中文标题】React Native：如何将 <TextInput/> 的高度和宽度设置为 <View/> 容器？

【英文标题】：React Native: How to set <TextInput/>'s height and width to <View/> container?

【发布时间】：2017-02-05 22:22:44

【问题描述】：

我目前在 <View> 中有一个 <TextInput>，它有一个 padding: 15。我希望<TextInput>'s 的宽度和高度覆盖<View> 内的所有空间，除了填充。

所以我尝试了var width = Dimensions.get('window').width 和以下，但< TextInput > 遵守左侧的填充但是当您继续键入时，它超出了右侧的填充：

<View style =  padding: 15 > <TextInput style =  width: width  /> </View>

那么我怎样才能让 TextInput 覆盖 View 内部的所有空间、高度和宽度，同时也遵守 View 的填充规则？

谢谢

【参考方案1】：

尝试将 TextInput 的样式设置为 flex: 1 而不是获取宽度。 Flex 样式将自动填充您的视图并将填充留空。

<View style =  padding: 15 > <TextInput style =  flex: 1  /> </View>

【讨论】：

谢谢！它运作良好。一个问题，为什么必须在 TextInput 的开头单击它才能使文本光标向上并开始输入？我怎样才能做到这一点，如果我点击 TextInput 覆盖的任何地方，开头的文本光标会弹出，我可以开始输入？

这只处理宽度，但问题是如何设置高度和宽度来查看容器。

【参考方案2】：

首先尝试获取View 的尺寸：

<View 
    onLayout=(event) => 
        var x_pos, y_pos, width, height = event.nativeEvent.layout;
     
/>

然后使用检索到的宽度和高度来设置您的TextInput 的宽度和高度。唯一的事情是您在运行时获得这些值。

【参考方案3】：

另一个好的答案是添加：

alignItems: 'stretch'

alignItems: 'stretch' 将沿交叉轴拉伸每个子元素，只要子元素没有指定的宽度（flexDirection: 行）或高度（flexDirection: 列）。​

在你的容器中，如果你有的话，比如：

const styles = StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'stretch',
  
);

【讨论】：

这应该是公认的答案，因为它处理高度和宽度，而不仅仅是宽度。