首页 > 解决方案 > 使用 React 本机导航重新启动应用程序时出现间歇性黑屏

问题描述

我正在使用React 本机导航 V:"^1.1.334"来处理我的应用程序中的路由。我目前正在渲染一个登录屏幕,然后使用 redux/redux-saga 调度一个操作来更改状态,具体取决于用户是否登录。我在发布版本中遇到问题,过了一段时间,如果我重置应用程序,它只会呈现一个空白屏幕,屏幕上什么也没有,修复它的唯一方法是完全擦除应用程序的数据和缓存。强制应用程序停止不起作用。我想有很多可能的原因,但我高度怀疑这可能与我实现登录屏幕逻辑以切换到受保护内容的方式有关。我有一个非常标准的 index.js

var store = configureStore();

registerScreens(store, Provider); // this is where you register all of your app's screens

// start the app
Navigation.startSingleScreenApp({
    screen: {
        screen: 'myapp.Login',
        navigatorStyle,
    },
    drawer: { // optional, add this if you want a side menu drawer in your app
        left: { // optional, define if you want a drawer from the left
            screen: 'myapp.Drawer', // unique ID registered with Navigation.registerScreen
            fixedWidth: 600, // a fixed width you want your left drawer to have (optional)
        }
    }
});
AppRegistry.registerHeadlessTask('TrackPlayer', 
    () => require('./app/modules/player/player-handler.js')(store));

然后在我的登录屏幕中,我有身份验证逻辑

componentDidMount(){
  this.props.actions.checkAuth();
}

render() {
  if (this.props.user.isAuth) {
    this.props.navigator.resetTo({
      screen: 'myApp.Player',
      navigatorStyle :{
        navBarHidden: true,
      }
    });

    return null;
  }

  return (<LoginScreen />);
}

checkAuth函数调度一个异步操作,然后如果用户通过身份验证,则通过 redux 更改状态并user.isAuth更新,这将重置应用程序。我认为问题是在主屏幕仍在渲染时我可能无法重置应用程序?因为也许它会触发某种赛车条件并且没有渲染任何东西?

所以我的问题是将这个逻辑放在渲染方法中是否会发生冲突,如果是这样,应该在哪里实现所述逻辑?或者这可能是 react-native-navigation 的问题?

我检查了 log-android 的输出(因为它是一个发布版本),当应用程序正确呈现时输出似乎相同,而当它不正确时,至少没有明确抛出任何错误。

如果你好奇的话,这就是它的样子。也可能是我也在启动我的应用程序singleTask吗?应该是别的吗?我更改了它,因为按下后退按钮时应用程序从后台返回时遇到问题,这并没有解决。那是另一个问题。

07-24 15:35:19.703  4150  4150 D ReactNative: ReactInstanceManager.ctor()
07-24 15:35:19.715  4150  4150 D ReactNative: ReactInstanceManager.createReactContextInBackground()
07-24 15:35:19.715  4150  4150 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundInner()
07-24 15:35:19.720  4150  4150 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundFromBundleLoader()
07-24 15:35:19.720  4150  4150 D ReactNative: ReactInstanceManager.recreateReactContextInBackground()
07-24 15:35:19.720  4150  4150 D ReactNative: ReactInstanceManager.runCreateReactContextOnNewThread()
07-24 15:35:19.811  4150  4169 D ReactNative: ReactInstanceManager.createReactContext()
07-24 15:35:20.158  4150  4169 D ReactNative: Initializing React Xplat Bridge.
07-24 15:35:20.163  4150  4169 D ReactNative: Initializing React Xplat Bridge before initializeBridge
07-24 15:35:20.172  4150  4169 D ReactNative: Initializing React Xplat Bridge after initializeBridge
07-24 15:35:20.173  4150  4169 D ReactNative: CatalystInstanceImpl.runJSBundle()
07-24 15:35:20.199  4150  4178 D ReactNative: ReactInstanceManager.setupReactContext()
07-24 15:35:20.200  4150  4178 D ReactNative: CatalystInstanceImpl.initialize()
07-24 15:35:21.547  4150  4150 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
07-24 15:35:21.559  4150  4177 I ReactNativeJS: Running application "uplayer.Drawer" with appParams: {"initialProps":{"screenInstanceID":"screenInstanceID4","navigatorID":"navigatorID3_nav","navigatorEventID":"screenInstanceID4_events"},"rootTag":1}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
07-24 15:35:21.593  4150  4150 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
07-24 15:35:21.729  4150  4177 I ReactNativeJS: Running application "uplayer.Login" with appParams: {"initialProps":{"screenInstanceID":"screenInstanceID2","navigatorID":"navigatorID1_nav","navigatorEventID":"screenInstanceID2_events"},"rootTag":11}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
07-24 15:35:22.330  4150  4177 I ReactNativeJS: Cookie doesn't contain sid [object Object]
07-24 15:35:24.216  4150  4177 I ReactNativeJS: isPurchased false

标签: reactjsreact-nativewix-react-native-navigation

解决方案


推荐阅读