反应导航有时不起作用

Question

我希望这是一个已知的问题，因为我无法提供太多帮助解决问题的方法。

我正在通过以下设置为我的应用程序使用反应导航：

• AppContainer
  • 启动画面
  • 设置屏幕（堆栈导航器）
  • 主屏幕（堆栈导航器）

当我的应用程序启动时，它会转到启动屏幕，该屏幕会确定这是否是第一次运行，并根据此决定使用主屏幕或设置屏幕调用this.props.navigation.navigate()。

到目前为止，所有方法都可以正常运行，并且非常标准。

首次启动我的应用程序时，用户会被转到设置屏幕，在该屏幕中，他们浏览一系列输入数据并选择下一个按钮的屏幕，以进入下一个屏幕。这是发生问题的地方。我的第一个屏幕仅包含一些文本和一个下一个按钮（这是一个常规按钮组件），单击该按钮时会调用this.props.navigation.push('nextviewname', {data: data})移至下一个视图。

下一个视图包含一个文本输入以及后退和下一步按钮，这是我遇到的问题。在我的Android X手机上全新安装应用程序的发行版后，当我到达此屏幕时，所有输入均无效。我不能：

• 点击后退下一页
• 单击标题顶部的左上角的向后箭头
• 单击文本输入（光标确实会在文本输入中短暂显示，但键盘从未出现）
• 单击硬件后退键

在极少数情况下，上述某些方法确实有效（例如，文本输入有时会起作用），有时我什至会进入设置的下一步，但很少能一路直通]]

奇怪的是，当我在手机上调试我的应用程序时，所有这些都有效。

更新：

我刚刚在Android 9模拟器上进行了测试，但遇到了同样的问题。

Update 2：

这变得很奇怪，当应用程序处于损坏状态时，我仍然可以调出react native调试菜单，但是当我单击Toggle Inspector时，什么也没有发生（即，我没有获得检查器UI ）。看起来这似乎在破坏一切。

以前有没有人看过/解决过这个问题？目前，它实际上使我的应用程序无用了。

Update 3：

希望可以使一些事情变得更清楚的代码：

const SetupUser = createStackNavigator(
  {
    SetupUser: WelcomeScreen,
    SetupName: UserName,
    SetupCurrentWeight: CurrentWeight,
    SetupGoalWeight: GoalWeight,
    SetupGoalDate: GoalDate,
    Summary: Summary,
    LogWeight: LogWeight,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#001830',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  },
);

const MainApp = createStackNavigator(
  {
    LogWeight: LogWeight,
    LogWeightSummary: LogWeightSummary,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#001830',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  },
);

export default createAppContainer(
  createSwitchNavigator(
    {
      MainApp: MainApp,
      SplashScreen: SplashScreen,
      SetupUser: SetupUser,
    },
    {
      initialRouteName: 'SplashScreen',
    },
  ),
);
将这些代码片段合并在一起（我删除了选项卡导航器，因为即使没有它，错误仍然存​​在），我认为我已经设法找到了问题的根源，但是我仍然不确定如何解决它。加载的第一个视图是启动屏幕，如下所示：

export default class SplashScreen extends React.Component {
constructor(props) {
    super(props);

    GoBinder.verifyDatabase()
      .then(GoBinder.getLastUser())
      .then(user => {
        this.props.navigation.navigate(
          user.user == null ? 'SetupUser' : 'MainApp',
        );
      })
      .catch(error => {
        GoBinder.toast('Error while checking initial user state: ' + error);
      });
  }
render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}
在上面的代码中，GoBinder.verifyDatabase（）和GoBinder.getLastUser（）是对本机代码的调用，这些代码执行一些数据库操作以进行设置并检查是否存在任何现有用户。我认为问题是this.props.navigation.navigate触发得太快，这导致反应导航加载下一个屏幕，但在此过程中混乱了。

我已经尝试按照https://www.novemberfive.co/blog/react-performance-navigation-animations中关于将阻塞代码移到InteractionManager.runAfterInteractions下的componentDidMount中的建议，但这没有什么区别。但是，我使用一个按钮手动触发了移至新屏幕的操作，一切正常，因此它看起来就像以编程方式更改屏幕的行为使事情变得混乱了。

感谢您的帮助

我希望这是一个已知的问题，因为我不能提供太多帮助解决问题的方法。我正在使用具有以下设置的应用程序进行反应导航：AppContainer初始屏幕设置屏幕（...

Answer 1

因此，我不确定这是否是最佳解决方案，但我找到了解决方法。我现在按照InteractionManager.runArfetInteraction()中的建议在https://www.novemberfive.co/blog/react-performance-navigation-animations中调用我的数据库代码。然后，我用数据库函数的结果调用setState来存储结果。最后，我使用setState上的回调来触发实际的导航。我完整的工作代码是：