Javascript React Native：如何将 <TextInput/> 的高度和宽度设置为 <View/> 容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39739011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native: How to set <TextInput/>'s height and width to <View/> container?
提问by Walter
I currently have a <TextInput>inside a <View>that has a padding: 15. I would like for the <TextInput>'swidth and height to cover all space inside <View>except the padding.
我目前有一个<TextInput>里面<View>有一个padding: 15. 我希望<TextInput>'s宽度和高度覆盖<View>除填充之外的所有空间。
So I tried var width = Dimensions.get('window').widthand the following, but the < TextInput >abide to the padding on the left but when you continue to type, it goes beyond the right side padding:
所以我尝试var width = Dimensions.get('window').width了以下内容，但< TextInput >遵守左侧的填充，但是当您继续键入时，它超出了右侧的填充：
<View style = {{ padding: 15 }}> <TextInput style = {{ width: width }} /> </View>
So how can I get the TextInput to cover all space, height and width, inside View yet abide to the View's padding rule as well?
那么如何让 TextInput 覆盖 View 内部的所有空间、高度和宽度，同时还要遵守 View 的填充规则？
Thank you
谢谢
回答by rudydydy
Try setting the styling of TextInput to flex: 1 instead of getting the width. The Flex style will automatically fill your view and leave the padding blank.
尝试将 TextInput 的样式设置为 flex: 1 而不是获取宽度。Flex 样式将自动填充您的视图并将填充留空。
<View style = {{ padding: 15 }}> <TextInput style = {{ flex: 1 }} /> </View>
回答by Gonzalo Ortellado
Another good answer would be to add:
另一个好的答案是添加：
alignItems: 'stretch'
alignItems: 'stretch' will stretch every child element along the Cross Axis as long as the child element does not have a specified width (flexDirection: row) or height (flexDirection: column). ?
alignItems: 'stretch' 将沿交叉轴拉伸每个子元素，只要子元素没有指定的宽度（flexDirection：row）或高度（flexDirection：column）。?
In your container if you have one, something like:
在您的容器中，如果您有一个，例如：
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
}
});
回答by Jan Franz Palngipang
try getting the View's dimensions first:
首先尝试获取View的尺寸：
<View
onLayout={(event) => {
var {x_pos, y_pos, width, height} = event.nativeEvent.layout;
}}
/>
Then use the retrieved width and height to set your TextInput's width and height. The only thing is you get these values on runtime.
然后使用检索到的宽度和高度来设置您TextInput的宽度和高度。唯一的事情是您在运行时获得这些值。
