在 react-native 中更改容器位置答案

【问题标题】：Change a container postion in react-native在 react-native 中更改容器位置
【发布时间】：2020-07-22 09:17:32
【问题描述】：

我正在尝试自定义 jitsi-meet。这里工具栏包含视频静音、音频静音和其他按钮。如何将蓝色背景的容器放置在屏幕底部？如果我删除 height 属性，那么整个内容将放置在屏幕底部，但在这种情况下，我不会在工具栏中的项目周围留出间距。

toolbar: {
        alignItems: 'flex-start',
        flexDirection: 'column',
        justifyContent: 'space-around',
        marginBottom: 10,
        paddingHorizontal: 5,
        backgroundColor: 'dodgerblue',
        height: '70%',
    },

如果我输入height:'100%'，它将占用整个屏幕。其他元素在此处注释。此屏幕位于相机屏幕的顶部。

【问题讨论】：

你能发布你正在渲染的完整代码吗？还是“工具栏”是页面上唯一的对象？
@RossHochwert 你能编辑帖子吗？
你没有添加你正在渲染的完整代码，所以我很难理解。我的建议是在您的工具栏周围放置一个View，并将justifyContent 设置为flex-end 以从屏幕底部开始。

标签： react-native flexbox react-native-android jitsi jitsi-meet

【解决方案1】：

toolbar: {
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        marginBottom: 10,
        paddingVertical: 5,
        width:'100%',
        backgroundColor: 'dodgerblue',
    }

如果你想在水平行中对齐内容，那么你应该给 flexDirection='row'。在 react native 中默认 flexDirection 是列，所以不需要明确提及。

【讨论】：

我想保持工具栏中的元素堆叠。

【解决方案2】：

如果不发布您完全呈现的内容，很难理解，但似乎您需要将工具栏视图包装在父视图中，并通过justifyContent: 'flex-end'修复父视图从页面底部开始/p>

<View style={{justifyContent:'flex-end', flex:1}}>
  <View style={{styles.toolbar}}>
  </View>
</View>

或者，您可以将父视图设置为flexDirection: 'column-reverse'。

【讨论】：