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>

谢谢你！效果很好。有一个问题，为什么必须在 TextInput 的开头单击才能使文本光标向上并开始输入？我该如何做到这一点，以便如果我单击 TextInput 覆盖的任何位置，开头的文本光标将弹出并且我可以开始输入？ (2认同)

Answer 2

另一个好的答案是添加:

alignItems: 'stretch'

alignItems:'stretch'将沿着Cross Axis拉伸每个子元素,只要子元素没有指定的宽度(flexDirection:row)或height(flexDirection:column).

在你的容器中,如果你有一个,例如:

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