【发布时间】:2021-11-08 11:40:41
【问题描述】:
我的容器不想显示全宽..即使我写了如下代码,有什么问题吗?
我所有的样式代码都在这里,我给了背景颜色以显示末尾有一个空格,以及如何删除它直到颜色变成全屏
这是来自 name.txs 的代码
render() {
return (
<Container style = {styles.container}>
<VStack alignItems="center" alignContent="center">
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Please Input your Name
</Text>
<TextInput
style={styles.input}
placeholder='Enter Your Name Here'
onChangeText={ (name) => this.props.authStore.setName(name)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Month of Your Born
</Text>
<TextInput
style={styles.input}
placeholder='January, February, etc.'
onChangeText={ (month) => this.props.authStore.setMonth(month)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Day of Your Born
</Text>
<TextInput
keyboardType="numeric"
placeholder='1-31'
onChangeText={ (day) => this.props.authStore.setDay(day)}
/>
</View>
<View style = {styles.view}>
<Button
title="Submit"
onPress={() => this.props.navigation.push('Zodiac')}/>
</View>
</VStack>
</Container>
);
}
【问题讨论】:
-
附加 JSX 代码
-
我更新了我的问题,你能帮帮我吗?
-
尝试将
width: 100%添加到VStack组件。 -
width:'100%' 使组件占用父组件的 100% 宽度。您的父组件可能没有占据全屏宽度。
标签: react-native flexbox styles