如何将此文本与其 parent 弹性项目的中心对齐？

Question

我有一些 react-native 代码，其中有一个 pop-up 模态。我使用 flex 创建它，但由于某种原因，文本不会垂直对齐。我使用 top = 30% 解决了它，但是我的可触摸不透明度（围绕文本）没有跨越所有可用的免费 space。我觉得这是一个 hacky 解决方案。

想知道是否有更好的自动垂直对齐文本并确保可触摸的不透明度占用可用的免费 space？

下面是我的代码：

<Modal
    isVisible={confirmationVisible}
    onBackdropPress={() => toggleConfirmation()}
    style={styles.confirmationModal}
>
    <Text style={styles.confirmationTitle}>Would you like to add a beacon to {assetName}?</Text>

    <TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
        <Text style={styles.confirmationText}>No, I'm done</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconExistingScreen")}>
        <Text style={styles.confirmationText}>Yes, an existing Beacon</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconScreen")}>
        <Text style={styles.confirmationText}>Yes, a new Beacon</Text>
    </TouchableOpacity>

</Modal>

下面是我的造型：

confirmationModal: {
    flex: 0.3,
    width: "60%",
    alignItems: "center",
    justifyContent: "space-evenly",
    backgroundColor: "white",
    marginTop: "auto",
    marginBottom: "auto",
    marginLeft: "auto",
    marginRight: "auto",
    borderRadius: 8
},
confirmationTitle: {
    fontWeight: "bold",
    textAlign: "center",
    margin: 5,
    paddingLeft: 20,
    paddingRight: 20
},
confirmationContainer: {
    borderTopColor: "lightgrey",
    borderTopWidth: 1,
    width: "100%"
},
confirmationText: {
    textAlign: "center",
    color: COLORS.purple
},

编辑：如果好奇，请使用此 modal 此外，已尝试在 confirmationContainer 上使用 justifyContent 但它不起作用，不确定为什么

编辑2：得到了解决方案。似乎 flex 正在缩放必须为我的文本元素手动设置高度和宽度。从 parent 容器中删除 justifyContent 和 alignItems，我能够将 textAlignVertical 用于我的标题和缩放 titleContainer 与 touchableContainers 分别使用 flex 2 和 flex 1。不确定发生了什么，但可触摸现在缩放整个自由 space 并且文本垂直对齐...使用 AnthonyDev220 的解决方案并重新设计，因此将他标记为最佳答案，更新的样式 jsx 没有改变：

confirmationModal: {
    flex: 0.3,
    width: "60%",
    backgroundColor: "white",
    marginTop: "auto",
    marginBottom: "auto",
    marginLeft: "auto",
    marginRight: "auto",
    borderRadius: 8
},
confirmationTitle: {
    fontWeight: "bold",
    textAlign: "center",
    textAlignVertical: "center",
    flex: 2,
    paddingLeft: 20,
    paddingRight: 20
},
confirmationContainer: {
    borderTopColor: "lightgrey",
    borderTopWidth: 1,
    flex: 1,
    width: "100%"
},
confirmationText: {
    marginTop: "auto",
    marginBottom: "auto",
    textAlign: "center",
    color: COLORS.purple
},

Answer 1

您可以尝试将 textAlignVertical: "center" 添加到您的 confirmationText

或

尝试将您的组件包装在一个组件中，然后设置您的组件网络的样式。

<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
    <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
        <Text style={styles.confirmationText}>No, I'm done</Text>
    </TouchableOpacity>
</View>

其他两个 <Text> 组件也是如此。

Answer 2

confirmationContainer: {
    display: flex,
    justifyContent: center,
    alignItems:center,
    borderTopColor: "lightgrey",
    borderTopWidth: 1,
    width: "100%"
}

如何将此文本与其 parent 弹性项目的中心对齐？

How to align this text in the center of its parent flex item?

javascript

react-native