react-native - 如果我使用按钮代替它，则无法执行 TouchableOpacity 或 TouchableHighlight 的 onPress 它工作我做错了什么？

Question

我创建了一个 MyAlertBox.js 文件。用于测试使用如下。

render() {
       return (
               <MyAlertBox title="Testing" message="Worked?" show={true} />
       );
     }

在 Home.js 中。MyAlertBox 如下所示。

export default class MyAlertBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Alert_Visibility: props.show,
            showme: props.show
        };
    }

    ok_Button (){
        this.setState({showme:false,Alert_Visibility:false});
    }

    render() {
        if (!this.state.Alert_Visibility)
            return (<View><Text>Suppose to be alertbox.</Text></View>);
        else
            return (
                <View style={styles.MainContainer}>
                    <Modal
                        visible={this.state.Alert_Visibility}
                        transparent={true}
                        animationType={"fade"}
                        onRequestClose={() => { console.warn('closing.');this.Show_Custom_Alert(false)}} >

                        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                            <View style={styles.Alert_Main_View}>
                                <Text style={styles.Alert_Title}>{this.props.title}</Text>
                                <View style={{ width: '100%', height: 2, backgroundColor: '#fff' }} />
                                <Text style={styles.Alert_Message}> {this.props.message} </Text>
                                <View style={{ width: '100%', height: 1, backgroundColor: '#fff' }} />
                                <View style={{ flexDirection: 'row', height: '30%' }}>
                                    <TouchableOpacity
                                        style={styles.buttonStyle}
                                        onPress={this.ok_Button.bind(this)}
                                        activeOpacity={0.7}>
                                        <Text style={styles.TextStyle}> OK </Text>
                                    </TouchableOpacity>
                                    {/* <Button title="OK" onPress={this.ok_Button.bind(this)} /> */}
                                    <View style={{ width: 1, height: '100%', backgroundColor: '#fff' }} />
                                    <TouchableHighlight
                                        style={styles.buttonStyle}
                                        onPress={this.ok_Button.bind(this)}
                                        activeOpacity={0.7} >
                                        <Text style={styles.TextStyle}> CANCEL </Text>
                                    </TouchableHighlight>
                                    {/* <Button title="CANCEL" onPress={this.ok_Button.bind(this)} /> */}
                                </View>
                            </View>
                        </View>
                    </Modal>
                </View>
            );
    }
}

此处显示警报框，但如果我将 TouchableOpacity 或 TouchableHightlight 更改为 Button，则无法单击“确定”或“取消”，它会被调用并正常工作。我究竟做错了什么？

请指教。谢谢。

Answer 1

确保从正确的包中导入 Touchable。我从“ react-native-gesture-handler ”导入了类，它应该是“ react-native ”。代码没问题。