React-native - как выровнять текст по центру в сборщике

Question

в моем собственном приложении для реакции я показываю 4 средства выбора рядом друг с другом.

на ios, я показываю средства выбора, и все работает очень хорошо

а на android текст почему-то выровнен по левому краю

вот мой код

<View
          style={{
            flexDirection: "row",
            flex: 1,
            height: "20%",
            maxHeight: "20%",
            marginTop: "5%",
            marginBottom: "5%",
            alignItems: "center",
          }}
        >
          <Picker
            style={{
              ...styles.picker,
              borderTopLeftRadius: 6,
              borderBottomLeftRadius: 6,
            }}
            itemStyle={styles.pickerItemStyle}
            mode="dropdown"
          >
            <Picker.Item
              label="BR"
              value="BR"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
            <Picker.Item
              label="PS"
              value="PS"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
          </Picker>
          <Picker
            mode="dropdown"
            style={styles.picker}
            itemStyle={styles.pickerItemStyle}
          >
            <Picker.Item
              label="D"
              value="D"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
            <Picker.Item
              label="E"
              value="E"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
          </Picker>
          <Picker
            mode="dropdown"
            style={styles.picker}
            itemStyle={styles.pickerItemStyle}
          >
            <Picker.Item
              label="IF"
              value="IF"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
            <Picker.Item
              label="VVS1"
              value="VVS1"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
          </Picker>
          <Picker
            mode="dropdown"
            style={styles.picker}
            itemStyle={styles.pickerItemStyle}
          >
            <Picker.Item
              label="-32%"
              value="-32%"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
            <Picker.Item
              label="-33%"
              value="-33%"
              color={Platform.OS === "ios" ? "#fff" : "black"}
            />
          </Picker>
        </View>

  picker: {
    // flex: 0.5,
    color: "#fff",
    fontSize: 12,
    backgroundColor: "#030E21",
    marginTop: "5%",
    width: "25%",
  },
  pickerItemStyle: {
    fontSize: 16,
    fontWeight: "bold",
    maxHeight: "100%",
    textAlign: "center",
    width: "100%",
  },

Я использую expo и не хочу извлекать только для этого выравнивания

кто-нибудь знает, как это может быть со стилем?

Answer 1

Даже если вы установите для элементов значение alignItems:center, это, похоже, только контролирует «значение align-self для всех прямых дочерних элементов как группы» согласно документации MDN . В примере MDN текст всегда по центру , независимо от того, как установлено alignItems.

Пробовали ли вы добавить это в свое определение style?

text-align: center;