Flexbox in native native：如何在屏幕中央对齐2个项目？

Posted 2021-04-10

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

这是一个预览相机屏幕

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

这就是我现在所拥有的：

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

import React from "react";
import { RNCamera } from "react-native-camera";
import { StyleSheet, TouchableOpacity, View, Platform} from "react-native";
import {Icon, Text} from "native-base";
import RequestPermissions from "../components/Permissions/RequestPermissions";
import I18n from "../i18n/i18n";

/**
 * This is the component which allows the user to film his own film
 */
export default class CameraScreen extends React.Component
{
  constructor(props) {
    super(props);
    this.camera = null;
  }

  state = {
    isRecording: false,
    iconVid: "record",
    iconMode: null,
    overlay: true
  };

  /**
   * With RNCamera, it seems that permission is always asked to the user... Maybe this code is then irrelevant
   */
  componentWillMount() {
    if (Platform.OS === "android") {
      RequestPermissions().then(() => {
        console.log("granted");
      }).then((err) => {
        console.log(err)
      });
    }
  }

  componentWillUnmount() {
    this.stopRecording();
  };

  stopRecording = () => {
    if (this.camera) {
      this.camera.stopRecording();
      this.setState({
        isRecording: false,
        iconVid: "record"
      });
    }
  };

  renderCamera = () => {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={cam => {
            this.camera = cam;
          }}
          style={styles.preview}
        >
          <View style={styles.controlsContainer}>
            <View style={styles.topRightButton}>
              <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                <Icon name={"arrow-left"} type={"Feather"} style={styles.iconFurtive}/>
              </TouchableOpacity>
            </View>
            <View style={styles.middleContainer}>
              <Text style={styles.actionText}>{I18n.t("action_text").toUpperCase()}</Text>
            </View>
            <View style={styles.leftContainer}>
              <TouchableOpacity onPress={() => this.recordVideo()}>
                <Icon name={this.state.iconVid} type={"MaterialCommunityIcons"} style={styles.iconCamera}/>
              </TouchableOpacity>
            </View>
          </View>
        </RNCamera>
      </View>
    );
  };

  /**
   * For more options
   * https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md#recordasyncoptions-promise
   */
  recordVideo = () => {
    if (this.camera) {
        this.setState({ isRecording: true, iconVid: "stop" });
        // Show the overlay
        console.log("Device is Recording");
        this.camera.recordAsync({maxDuration: 15}).then(data => {
            this.stopRecording();

            console.log("Stop Recording");
            console.log(data);
        }).catch((err) => {
          console.log(err);
          this.stopRecording();
        });
    }
  };

  render() {
    return this.renderCamera()
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:30,
  },
  controlsContainer: {
    flex: 1,
    flexDirection: "column"
  },
  topRightButton: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  middleContainer: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  leftContainer: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  actionText: {
    color: "#fff",
    fontSize: 72
  },
  preview: {
    flex: 1,
  },
  iconCamera: {
    color: "#ff4459",
    marginBottom: 50,
    padding: 25,
    backgroundColor: "#fff",
    borderRadius: 50,
  },
  iconFurtive: {
    color: "#fff",
    marginTop: 50,
    marginLeft: 50,
  }
});

这就是我想要的：

如何使用flexbox？我错过了什么？

答案

使用{styles.topRightButton}在View中更改了代码

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>
        );

另一答案

对于中间和左边，内容应该与具有flexDrirection的div相同的div：'row'。这使它们处于同一行。

控件容器可以具有justifyContent：'center'和alignItems：'center'。

topRightButton应该覆盖父样式。