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

我目前在<View>内有<TextInput>，它有一个padding: 15。我希望<TextInput>'s的宽度和高度能够覆盖<View>内部除填充以外的所有空间。React Native：如何将<TextInput/>的高度和宽度设置为<View/>容器？

所以，我想var width = Dimensions.get('window').width及以下，但<TextInput>恪守填充左侧但是当你继续键入，它超越了右侧边距：

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

所以，我怎么能得到TextInput覆盖内部所有空间，高度和宽度，View也遵守View的填充规则？

谢谢

2016-09-28 Walter

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

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

2016-09-28 06:02:16 rudydydy

谢谢！它工作得很好。有一个问题，为什么必须在TextInput的开始处点击右键以获取文本光标并开始输入？我怎么做到这一点，如果我点击任何地方的TextInput封面，在开始的文本光标会弹出，我可以开始输入？ – Walter

尝试获得View“第一s尺寸：

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

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

2016-09-28 07:18:30

另一个很好的答案是添加：

alignItems: 'stretch'

alignItems：“拉伸”，只要将延伸沿轴间的每个子元素的子元素没有一个指定的宽度（flexDirection：行）或高度（flexDirection：列）。

在容器中，如果你有一个，是这样的：

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

2017-10-25 13:40:16

回答