React Native：如何将<textinput>的高度和宽度设置为<view>容器？

Question

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

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

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

那么如何才能让TextInput覆盖View中的所有空间，高度和宽度，同时还要遵守View的填充规则？

谢谢

Answer 1

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

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

Answer 2

另一个好的答案是添加：

alignItems: 'stretch'

alignItems：'stretch'将沿着Cross Axis拉伸每个子元素，只要子元素没有指定的宽度（flexDirection：row）或height（flexDirection：column）。

如果您有容器，请在容器中，例如：

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

Answer 3

首先尝试获取View的尺寸：

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

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