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

Question

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

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

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

那么如何让 TextInput 覆盖 View 内的所有 space、高度和宽度，同时还要遵守 View 的填充规则？

谢谢

Answer 1

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

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

Answer 2

首先尝试获取 View 的尺寸：

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

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

Answer 3

另一个好的答案是添加：

alignItems: 'stretch'

alignItems: 'stretch' 将沿交叉轴拉伸每个子元素，只要子元素没有指定宽度 (flexDirection: row) 或高度 (flexDirection: column)。

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

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

React Native: How to set <TextInput/>'s height and width to <View/> container?