Reactjs 内存中的边距无法正常工作

我想在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

import React，{Component}来自“React”
进口{
样式表，
看法
文本，
形象
}从“反应本机”；
类主屏幕扩展组件{
构造函数（）{
超级（）
this.board=[]
}
渲染（）{
返回(
测试。。。。。。。。。。
)
}
}
constyles=StyleSheet.create（{
主屏幕框：{
显示：“flex”，
flexDirection：“列”
},
网格框：{
玛金托普：“90%”，
边缘左：5，
marginRight:5
}
})
常数{
网格框，
主屏幕盒
}=样式

在这里，我做了一些简单的事情，比如

marginTop:“90%”，

期望文本位于底部，但它仍然保持在屏幕的一半

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

在主容器中添加一个弹性重量（flex:1）

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

---

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

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

并使用

style={styles.MainScreenBox}

在根视图中应用。您可以参考了解FlexBox的工作原理。另外请注意，flexDirection在react native中默认为列，您不必设置它并显示：“flex”