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

Question

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

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

如果我height:'100%'说它需要整个屏幕。其他元素在此处注释。该屏幕位于相机屏幕的顶部。

Answer 1

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

如果你想在水平行中对齐内容，那么你应该给 flexDirection='row'。在反应原生默认 flexDirection 是列，因此无需明确提及。

Answer 2

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

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

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