react native：将警报更改为模态的方法是什么？

Question

将警报更改为模态的方法是什么？ 在我的示例中，我尝试进行更改，但它说它不知道item.codeName和setModalVisible ， modalVisible 。 我很乐意支持这个问题

function firstButton(item) {
    Alert.alert({item.codeName},
      [{ text: 'ok, style: 'cancel', onPress: async () => { } }],
      { cancelable: false });
  }

到这个模式：

 function firstButton(item) {
    return (
        <View style={styles.centeredView}>
            <Modal animationType="slide" transparent={true} visible={modalVisible}>
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        <Text style={styles.modalText}>
                            {item.codeName}
                        </Text>

                        <View
                            style={{
                                flexDirection: 'row',
                                justifyContent: 'space-evenly',
                                alignContent: 'space-between',
                            }}
                        >
                            <TouchableWithoutFeedback
                                onPress={() => {
                                    setModalVisible(!modalVisible);
                                }}
                            >
                                <View style={{ top: 20, marginHorizontal: 10 }}>
                                    <LinearGradient
                                        colors={['#4c669f', '#3b5998', '#192f6a']}
                                        style={{
                                            borderRadius: 40,
                                            elevation: 10,
                                            paddingHorizontal: 40,
                                            paddingVertical: 10,
                                        }}
                                    >
                                        <Text style={styles.textStyle}>ok</Text>
                                    </LinearGradient>
                                </View>
                            </TouchableWithoutFeedback>

                            <TouchableWithoutFeedback
                                onPress={() => {
                                    setModalVisible(!modalVisible);
                                }}
                            >
                                <View style={{ top: 20, marginHorizontal: 10 }}>
                                    <LinearGradient
                                        colors={['#4c669f', '#3b5998', '#192f6a']}
                                        style={{
                                            borderRadius: 40,
                                            elevation: 10,
                                            paddingHorizontal: 40,
                                            paddingVertical: 10,
                                        }}
                                    >
                                        <Text style={styles.textStyle}>cancel</Text>
                                    </LinearGradient>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>
                    </View>
                </View>
            </Modal>
        </View>
    );
};

Answer 1

对于modalVisible和setModalVisible您需要定义一个反应 state，例如 -

对于功能组件

const [modalVisible, setModalVisible] = React.useState(false);

然后，当您希望模态显示在屏幕上时，使用setModalVisible将modalVisible的值更改为true 。

对于item.codeName - 请分享item结构。 但是，如果您使用firstButton作为组件然后解构您的道具，请改用function firstButton({item}) ，否则它应该可以正常工作。