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 並且我不想僅為這個 alignment 彈出

任何人都知道如何不使用造型？

Answer 1

根據MDN 文檔，即使您將元素設置為具有alignItems:center ，這似乎也只能控制“作為一個組的所有直接子級的align-self值”。 在 MDN 示例中，無論alignItems如何設置，文本始終居中。

您是否嘗試將其添加到您的style定義中？

text-align: center;