时间戳

首页 > 解决方案 > react-native - 如何在选择器中居中对齐文本

javascript - react-native - 如何在选择器中居中对齐文本

问题描述

在我的反应原生应用程序中，我显示 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%",
  },

我正在使用世博会，我不想仅仅为了这个对齐而弹出

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

标签： javascriptreactjsreact-native

解决方案

根据MDN 文档，即使您将元素设置为 have alignItems:center，这似乎也只能控制“作为一个组的所有直接子级的值” 。在 MDN 示例中，无论如何设置，文本始终居中。align-selfalignItems

您是否尝试将其添加到您的style定义中？

text-align: center;

推荐阅读