React-Native 中的边距无法正常工作答案

【问题标题】：Margin in React-Native not working properlyReact-Native 中的边距无法正常工作
【发布时间】：2019-01-11 01:45:25
【问题描述】：

我试图在 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%",，期望文本会出现在底部，但它仍然停留在屏幕的一半。

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

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

为您的主容器添加一个弹性重量 (flex:1)。

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

【讨论】：