Css react native中的Flexbox：如何在屏幕中心对齐2个项目？

我最近发现了flexbox，我正在努力让它工作，我肯定错过了一些让我很难理解它的机制的概念，所以我有：

这是一个预览相机屏幕

• 右上角有一个后退按钮
• 中间的文字
• 还有一个录制按钮来拍摄一些图像

以下是我目前的情况：

这是通过此React本机组件完成的（包括样式）

从“React”导入React；
从“react native camera”导入{RNCamera}；
从“react native”导入{样式表、TouchableOpacity、视图、平台}；
从“本机基”导入{图标，文本}；
从“./components/Permissions/RequestPermissions”导入RequestPermissions；
从“./I18n/I18n”导入I18n；
/**
*这是允许用户拍摄自己电影的组件
*/
导出默认类CameraScreen扩展React.Component
{
建造师（道具）{
超级（道具）；
this.camera=null；
}
状态={
以色列记录：错，
iconVid:“记录”，
iconMode:null，
覆盖：对
};
/**
*使用RNCamera，似乎总是向用户请求权限……也许这段代码与此无关
*/
组件willmount（）{
如果（Platform.OS==“android”）{
RequestPermissions（）。然后（（）=>{
控制台日志（“授予”）；
}).然后（（错误）=>{
console.log（错误）
});
}
}
组件将卸载（）{
这个。停止录制（）；
};
停止录制=（）=>{
如果（这个相机）{
这个.camera.stopRecording（）；
这是我的国家({
以色列记录：错，
iconVid：“记录”
});
}
};
renderCamera=（）=>{
返回(
{
这个摄像头=凸轮；
}}
style={style.preview}
>
this.props.navigation.goBack（）}>
{I18n.t（“action_text”）.toUpperCase（）}
this.recordVideo（）}>
);
};
/**
*更多选择
* https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md#recordasyncoptions-允诺
*/
录制视频=（）=>{
如果（这个相机）{
this.setState（{isRecording:true，iconVid:“stop”}）；
//显示覆盖图
控制台日志（“设备正在记录”）；
this.camera.recordAsync（{maxDuration:15}）。然后（data=>{
这个。停止录制（）；
控制台日志（“停止记录”）；
控制台日志（数据）；
}).catch（（错误）=>{
控制台日志（err）；
这个。停止录制（）；
});
}
};
render（）{
返回这个
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：30，
},
控制容器：{
弹性：1，
flexDirection：“列”
},
右上角按钮：{
弹性：1，
justifyContent:“flex start”，
alignItems:'flex start'，
},
中间集装箱：{
弹性系数：0.5，
为内容辩护：“中心”，
对齐项目：“居中”，
},
左容器：{
弹性系数：0.5，
为内容辩护：“中心”，
对齐项目：“柔性端”，
},
行动文本：{
颜色：“fff”，
字体大小：72
},
预览：{
弹性：1，
},
iconCamera：{
颜色：“ff4459”，
marginBottom:50，
填充：25，
背景颜色：“fff”，
边界半径：50，
},
I冲突：{
颜色：“fff”，
玛金托普：50，
marginLeft:50，
}
});

以下是我想要的：

---

如何使用flexbox实现这一点？我遗漏了什么？

对于中间和左边，内容应该在同一个div中，该div有一个flexDrirection:“row”。这就把它们放在同一行

控件容器可以有justifyContent:“center”和alignItems:“center”

---

topRightButton应该覆盖父样式。

在视图中使用{styles.topRightButton}更改代码

return (
          <View style={styles.container}>
            <RNCamera
              ref={cam => {
                this.camera = cam;
              }}
              style={styles.preview}
            >
              <View style={styles.controlsContainer}>
                <View style={{justifyContent: 'flex-start', alignItems: 'flex-start',}}>
                  <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                    <Icon name={"arrow-left"} type={"Feather"} style={styles.iconFurtive}/>
                  </TouchableOpacity>
                </View>
                <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around'}}>
                  <View style ={{height: 50, width: 50, backgroundColor: 'transparent'}} />
                  <Text style={styles.actionText}>{I18n.t("action_text").toUpperCase()}</Text>
                  <TouchableOpacity onPress={() => this.recordVideo()}>
                    <Icon name={this.state.iconVid} type={"MaterialCommunityIcons"}/>
                  </TouchableOpacity>
                </View>
              </View>
            </RNCamera>
          </View>
        );

返回(
{
这个摄像头=凸轮；
}}
style={style.preview}
>
this.props.navigation.goBack（）}>
{I18n.t（“action_text”）.toUpperCase（）}
this.recordVideo（）}>
);

Hi，谢谢你的回答，你能提供一个代码沙盒或其他东西吗，因为我尝试了，但没有改变：事实上有些东西改变了，整个元素都在中间->columnuse position here@HoángVũAnh绝对位置对我来说不是一个解决方案，因为肖像或风景，我需要这些元素的相同配置，只有flex可以提供这种简单的解决方案抱歉，这不起作用，所有组件现在都在最上面一行，您是否有一个codesandbox示例来展示您的解决方案如何工作？请检查一下。这就是你想要的吗？是的，是这样的，你能解释一下我在flexbox理解中遗漏了什么吗？看来我已经接近解决方案了，但却无法实现。我想了解flex是如何与cild组件一起工作的，如果您能帮助我们接受这个答案，我们将不胜感激。使用flex，我们可以垂直或水平排列项目。因此，以这种方式划分视图（后退按钮和（动作和相机点击）是垂直的）。动作和摄像机是水平的。我看到了你的空视场，没有它怎么会有相同的结果？

return (
          <View style={styles.container}>
            <RNCamera
              ref={cam => {
                this.camera = cam;
              }}
              style={styles.preview}
            >
              <View style={styles.controlsContainer}>
                <View style={{justifyContent: 'flex-start', alignItems: 'flex-start',}}>
                  <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                    <Icon name={"arrow-left"} type={"Feather"} style={styles.iconFurtive}/>
                  </TouchableOpacity>
                </View>
                <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around'}}>
                  <View style ={{height: 50, width: 50, backgroundColor: 'transparent'}} />
                  <Text style={styles.actionText}>{I18n.t("action_text").toUpperCase()}</Text>
                  <TouchableOpacity onPress={() => this.recordVideo()}>
                    <Icon name={this.state.iconVid} type={"MaterialCommunityIcons"}/>
                  </TouchableOpacity>
                </View>
              </View>
            </RNCamera>
          </View>
        );