React-Native中的保证金无法正常运行

Question

我试图在React-Native上制作一个应用程序

首先，我只是想在底部进行导航

这就是我开始测试时所做的

import React, { Component } from 'react'
import {
    StyleSheet,  
    View, 
    Text, 
    Image
}  from 'react-native';

class MainScreen extends Component {

    constructor () {
        super () 
        this.board = []
    }
    render () {
        return (
            <View style={MainScreenBox}>
                 <View style={GridBox}>
                    <Text> Testing..........</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({ 
    MainScreenBox: {
        display: "flex",
        flexDirection: "column"
    },
    GridBox: {
        marginTop: "90%",
        marginLeft: 5,
        marginRight: 5
    }
})

const {
    GridBox, 
    MainScreenBox
} = styles

在这里，我做了marginTop: "90%",一样简单的操作，希望该文本位于底部，但仍在屏幕上保留一半。

问题：知道为什么会发生这种情况吗？

Answer 1

在主容器中添加弹性权重（ flex：1 ）。

MainScreenBox: {
    flex:1,
    display: "flex",
    flexDirection: "column"
},

Answer 2

清除所有样式并将其放入MainScreenBox样式：

const styles = StyleSheet.create({ 
    MainScreenBox: {
      flex: 1,
      justifyContent:'flex-end'
    }
})

并使用style={styles.MainScreenBox}应用于根视图。您可以参考flex doc来了解FlexBox的工作方式。另外请注意，在react native中，flexDirection默认为列，您不必设置它，也不显示：“ flex”。