我是一个新手,会做出react .我想在reactnative中按下模式外的按钮时关闭模式组件.下面是我的代码.

state = {
    visibleModal : false,
};

_hideModal(){
  this.setState({
    visibleModal: true,
  })
}


render(){
    return(
        <View style={
            [styles.container,
                {backgroundColor: this.state.visibleModal ? 'rgba(47, 60, 73, 0.75)': 'white'}
            ]}>

            <Text>Text Behind Modal</Text>

            { this._renderButton('BUTTON', () => this.setState({ visibleModal: true}) ) }
            <TouchableWithoutFeedback onPress={() => {this._hideModal()}}>
            <Modal animationType={"slide"}
                   transparent={true}
                   visible={this.state.visibleModal}>

                      <View style={styles.modalContent}>
                          <Row />
                      </View>

            </Modal>
          </TouchableWithoutFeedback>
        </View>
    );
}

}

推荐答案

只需在Modal中添加此props

onRequestClose={() => { this.visibleModal(false); } }

按下"后退"按钮将关闭模式

<Modal animationType={"slide"}
   transparent={true}
   visible={this.state.visibleModal}
   onRequestClose={() => { this.visibleModal(false); } }
>

EDIT

以上代码将只适用于Android系统.

对两人来说,

您可以添加自定义按钮来关闭模式

<TouchableOpacity
    onPress={() => {
        this.setState({visibleModal: false})
    } }>
    <Image
        style={[styles.modalBackIcon]}
        source={require('../../theme/images/back-icon.png')} />
</TouchableOpacity>

React-native相关问答推荐

使用react-native-reanimatedreact 导航崩溃

React-Native-Web 错误:rnw_blogpost.bundle.js:1414 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

FBSDK 和 LinkingManager 的 AppDelegate.m

变量 window在react-native 中代表什么?

使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

React-Native Android - 找不到 com.android.tools:common

从组件的 style属性中获取 CSS 属性值

如果我有 AngularJS 基础知识,怎么学习Thinking in ReactJS呢?

在 React Native (iOS) 中支持动态类型

通过 ToolbarAndroid => onIconClicked 显示 DrawerLayoutAndroid

如何在 React Native 上获取设备的 ip?

React Native 元素搜索栏边界线未清除

在 FlatList 上使用 React Native 搜索过滤器

如何在 React Native 中等待 Alert 对话框的响应?

错误 React Native CLI 对本机依赖项使用自动链接,但以下模块是手动链接的

如何在react-native中关闭模态

react-native:多色文本视图

使用行数react-native文本组件

使用 TouchableWithoutFeedback react-native onPress 不起作用

如何在 React-Native 中停止touch 事件传播