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

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覆盖所有的空间，高度和宽度，在视图内部，但遵守视图的填充规则，以及?

谢谢

Answer 1

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

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

Answer 2

另一个好的答案是:

alignItems: 'stretch'

alignItems: 'stretch'将沿着十字轴拉伸每个子元素，只要子元素没有指定宽度(flexDirection: row)或高度(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的宽度和高度。唯一的事情是你在运行时得到这些值。