javascript - React-Native Android 硬件后退按钮单击时出错 "Undefined is not a function(evaluating ' _this2.close( )') "

Question

我已经安装了react-native-orientation-loading-overlay包，用于在屏幕上应用加载程序。当用户点击硬件后退按钮时，backAndroid 的 addEventListener 被调用。根据条件，加载器的动画属性设置为 true，方向加载器开始加载。加载时，另一个函数 this.fetchData() 开始运行，它通过运行 Web 服务来获取数据并显示在同一页面(即 mainPage)的 ListView 中。并且在加载时，如果用户再次按下后退按钮，则会出现红色屏幕，并显示错误“未定义不是函数(评估_this2.close())”在react-native-oriation的onRequestClose方法中- loading-overlay\src\index.js 文件”显示。我尝试在加载器的动画属性设置为 true 之后 BackAndroid.removeEventListener('hardwareBackPress', () => {}); 但是它不是在职的。请给我任何解决方案。

  import OrientationLoadingOverlay from 'react-native-orientation-loading-overlay';


   <OrientationLoadingOverlay
     visible={this.state.animating}
     color="#6495ed"
     indicatorSize="large"
     messageFontSize={16}
     message="Loading..."
   />

我的硬件后退按钮点击事件监听器代码如下:

   BackAndroid.addEventListener('hardwareBackPress', () => {
     if(this.state.drawerState===true) {
       this.refs['draw'].closeDrawer();
     } else {
       if(this.props.navigator.getCurrentRoutes().length===1&&
         this.state.tagPressed===false){
         if (stack.length===0){
           Alert.alert(
             'Exit',
             'Are you sure?',
             [
               {text: 'Cancel', onPress: () => {return true;}},
               {text: 'Yes', onPress: () => BackAndroid.exitApp()},
             ],
           )
         } else {
           this.backButtonEvent();
         }
       } else {
         if(this.props.navigator.getCurrentRoutes().length===1&&
           this.state.tagPressed===true) {
           this.setState({ animating: true });
           this.setState({ tagPressed: false });
           this.setState({ title: 'Repository' });
           this.fetchData();
         } else {
           this.props.navigator.pop();
         }
       }
     }
     return true;
   });

这里的stack.length是导航路线数组的长度。我的 backButtonEvent() 函数如下:

   backButtonEvent() {
     if(stack.length===0) {
       this.refs['draw'].openDrawer();
     } else{
       this.setState({animating:true});
       dirPath = stack.pop();
       title = this.titleStack.pop();
       if(stack.length===0) {
         this.setState({srcUrl:require('../image/drawer1.png')});
         this.setState({drawerLock:'unlocked'});
       }
       this.fetchData();
     }  
   }

 <ListView 
   dataSource={this.state.dataSource}
   renderRow={(this.renderItem.bind(this))}
   enableEmptySections = {true}
 />  

fetchData(data){
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(data)
  });
}

Answer 1

引用source code of the react-native-orientation-loading-overlay第82行，它使用函数 this.close() 来关闭 Modal 但当引用 RN 0.41 Documentation 时， this.close() 不是 Modal 的预定义函数，因此当 typeof this.props.children === 'undefined' 时会触发上述错误。这是包的一个错误。它可能有新的状态来控制模态框的开/关，并允许 this.close() 函数将状态更改为关闭模态框。