【问题标题】:container doesn't want to display full screen容器不想全屏显示
【发布时间】: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


【解决方案1】:

&lt;Container&gt; 替换为 NativeBase 中的 &lt;Center flex={1}&gt;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-10-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多