css - 如何让这个容器在 React Native 上居中

Question

我怎样才能使这个容器居中

我想以 performContainer 风格为中心

像宽度一样居中

是只有使用 marginLeft 还是有一些 flexbox 属性才能做到这一点？

你也可以给我关于 React Native 的定位技巧吗？

代码如下：

return (
    <View style={styles.container}>
      <View style={styles.welcomeContainer}>
        <View style={styles.photo} />
        <Text style={styles.welcome}>Bem vindo(a), Carlos</Text>
      </View>
      <View style={styles.location}>
        <MaterialIcons
          style={styles.locationIcon}
          name="location-on"
          size={26}
          color="#707070"
        />
        <Text style={styles.locationText}>São Paulo</Text>
        <View style={styles.active}>
          <MaterialIcons
            style={styles.doneIcon}
            name="done"
            size={22}
            color="#707070"
          />
          <Text style={styles.activeText}>Ativo</Text>
        </View>
      </View>
      <View style={styles.performContainer}>
        <Text style={styles.performTitle}>Desempenho hoje</Text>
        <View
          style={{
            borderBottomColor: '#8CC63F',
            borderBottomWidth: 1,
          }}
        />
        <Text style={styles.earnText}>
          Voce ganhou: <Text style={styles.value}>R$ 85,20</Text>
        </Text>
        <View style={styles.ordersAceptedContainer}>
          <MaterialIcons
            style={styles.iconDelivery}
            name="check-circle"
            color="#707070"
            size={26}
          />
          <Text style={styles.ordersAcepted}>
            Pedidos entregues: <Text style={styles.value}>0</Text>
          </Text>
        </View>
        <View style={styles.ordersRejectedContainer}>
          <MaterialIcons
            style={styles.iconDeliveryRejected}
            name="cancel"
            color="#707070"
            size={26}
          />
          <Text style={styles.ordersRejected}>
            Pedidos recusados: <Text style={styles.value}>0</Text>
          </Text>
        </View>
        <TouchableOpacity
          style={styles.completePerformButton}
          onPress={() => {}}>
          <Text style={styles.completePerformButtonText}>
            Ver desempenho completo
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );

样式代码如下：

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  welcomeContainer: {
    flexDirection: 'row',
    padding: 20,
  },
  photo: {
    width: 50,
    height: 50,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: '#8CC63F',
  },
  welcome: {
    fontWeight: 'bold',
    fontSize: 18,
    padding: 10,
  },
  performContainer: {
    width: 283,
    height: 305,
    backgroundColor: '#f5f5f5',
    marginTop: 20,
    borderRadius: 5,
  },
  performTitle: {
    fontSize: 18,
    color: '#707070',
    fontWeight: 'bold',
    borderBottomWidth: 1,
    borderColor: '#8CC63F',
    padding: 15,
  },
  earnText: {
    fontSize: 16,
    padding: 15,
    marginBottom: 10,
  },
  ordersAcepted: {
    fontSize: 16,
    marginLeft: 10,
    marginBottom: 20,
  },
  ordersRejected: {
    fontSize: 16,
    marginLeft: 10,
  },
  completePerformButton: {
    alignItems: 'center',
    marginTop: 40,
  },
  completePerformButtonText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#8CC63F',
    textTransform: 'uppercase',
  },
  value: {
    fontWeight: 'bold',
  },
  ordersAceptedContainer: {
    flexDirection: 'row',
    marginBottom: 10,
  },
  ordersRejectedContainer: {
    flexDirection: 'row',
    marginTop: 10,
  },
  iconDelivery: {
    width: 26,
    height: 26,
    marginLeft: 15,
    marginBottom: 10,
  },
  iconDeliveryRejected: {
    width: 26,
    height: 26,
    marginLeft: 15,
    marginBottom: 10,
  },
  location: {
    flexDirection: 'row',
    marginBottom: 30,
    justifyContent: 'center',
  },
  locationIcon: {
    marginRight: 10,
    marginTop: 16,
  },
  locationText: {
    fontSize: 14,
    marginRight: 60,
    marginTop: 20,
    fontWeight: 'bold',
    color: '#707070',
  },
  active: {
    backgroundColor: '#f5f5f5',
    paddingHorizontal: 30,
    width: 108,
    height: 32,
    marginTop: 16,
    borderRadius: 15,
    flexDirection: 'row',
    alignItems: 'center',
  },
  activeText: {
    color: '#8CC63F',
    fontSize: 14,
    fontWeight: 'bold',
    alignItems: 'center',
  },
  doneIcon: {
    flexDirection: 'row',
    justifyContent: 'center',
    right: 15,
  },
});

sssssssssss。sdvdsnicnciicscoicnci