Javascript 反应本机:如何设置<;TextInput/>';s高度和宽度至<;查看/>;集装箱?
我目前在一个Javascript 反应本机:如何设置<;TextInput/>';s高度和宽度至<;查看/>;集装箱?,javascript,css,reactjs,react-native,jsx,Javascript,Css,Reactjs,React Native,Jsx,我目前在一个中有一个,它有一个填充:15。我希望的宽度和高度能够覆盖内部的所有空间,除了填充物 因此,我尝试了var width=Dimensions.get('window').width和以下内容,但是遵循左侧的填充,但是当您继续键入时,它超出了右侧的填充: <View style = {{ padding: 15 }}> <TextInput style = {{ width: width }} /> </View> 那么,我如何才能让TextIn
中有一个
,它有一个填充:15
。我希望的宽度和高度能够覆盖
内部的所有空间,除了填充物
因此,我尝试了var width=Dimensions.get('window').width
和以下内容,但是
遵循左侧的填充,但是当您继续键入时,它超出了右侧的填充:
<View style = {{ padding: 15 }}> <TextInput style = {{ width: width }} /> </View>
那么,我如何才能让TextInput覆盖所有空间、高度和宽度,同时遵守视图的填充规则呢
谢谢尝试将TextInput的样式设置为flex:1,而不是获取宽度。Flex样式将自动填充视图,并将填充留空
<View style = {{ padding: 15 }}> <TextInput style = {{ flex: 1 }} /> </View>
首先尝试获取视图的尺寸:
<View
onLayout={(event) => {
var {x_pos, y_pos, width, height} = event.nativeEvent.layout;
}}
/>
{
var{x_pos,y_pos,width,height}=event.nativeEvent.layout;
}}
/>
然后使用检索到的宽度和高度设置文本输入的宽度和高度。唯一的问题是在运行时获得这些值。另一个好答案是添加:
alignItems: 'stretch'
alignItems:“拉伸”将沿横轴拉伸每个子元素,只要该子元素没有指定的宽度(flexDirection:行)或高度(flexDirection:列)。
在您的容器中(如果您有),类似于:
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
}
});
非常感谢。它工作得很好。有一个问题,为什么必须在文本输入的开始处单击鼠标右键才能启动文本光标并开始键入?我如何才能这样做,如果我单击TextInput覆盖的任何位置,开始处的文本光标将弹出,我可以开始键入?这只处理宽度,但问题是如何设置查看容器的高度和宽度。这应该是公认的答案,因为它处理高度和宽度,而不仅仅是宽度。