如何在页面底部对齐视图而不使其依赖于其他视图答案

【问题标题】：How to align View at the bottom of the page without making it dependent on other Views如何在页面底部对齐视图而不使其依赖于其他视图
【发布时间】：2018-12-10 06:42:05
【问题描述】：

我希望将视图工具栏与页面底部对齐，而不使用 justifyContent 属性的 'space-around'。

下面是我如何制作这个工具栏的代码：

    <View style={{ height: '100%', justifyContent: 'space-between', }}>

    <View style={{ flexDirection: 'row', height: 44,
     alignItems: 'center', justifyContent: 'space-around', 
     backgroundColor: 'yellow'}}>

       <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>

    </View>
    </View>

【问题讨论】：

标签： react-native react-native-flexbox

【解决方案1】：

我查看了底部和位置属性。当我将底部：0，位置：'绝对'添加到内部视图样式时，我们还需要指定宽度。（不知道为什么相对允许自动取全宽）。但是如果我们添加 { bottom: 0, position: 'absolute', width: '100%') 那么内部视图将始终在底部对齐。如下所示

<View style={{ flexDirection: 'row', height: 44,
 alignItems: 'center', justifyContent: 'space-around', 
 backgroundColor: 'yellow', bottom: 0, position: 'absolute', width: '100%'}}>

   <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>

</View>
</View>

【讨论】：