React Native StackNavigator 在重新进入时消失答案

【问题标题】：React Native StackNavigator disappearing on re-entryReact Native StackNavigator 在重新进入时消失
【发布时间】：2018-08-22 18:12:02
【问题描述】：

我们在我们的 React Native 应用程序中遇到了一个非常奇怪的场景，即 react-navigation 仅在 Android 上观察到（在模拟器和物理设备上 AND 用于调试构建和发布构建)，但它在 iOS 上运行良好。

上下文

我们有一个现有的原生应用程序，并决定在 React Native 中实现一些新屏幕作为实验，看看它是否有利于我们的开发生命周期。

我们的本机应用程序有一个侧边栏菜单，我们添加了一个新的菜单项，即在选择时，将用户带入React Native部分。他们当然可以随时返回，然后再返回到 React Native 部分。

观察到的问题（仅在 Android 中发生）

我们已经确定它与 react-navigation 库有关，但我们不知道我们做错了什么。

当应用首次加载时，用户可以选择新的菜单项，React Native 应用加载正常，显示其初始路由页面，StackNavigator 工作正常。

如果用户返回到原生部分（通过返回键，或者通过从侧边栏菜单中选择不同的选项）然后选择返回到 React Native 部分，则 StackNavigator 部分不会显示。 StackNavigator 之外的其他 React 组件被渲染。我们知道它挂载了包含的组件，因为其中一些正在进行 API 调用，我们看到这些端点正在被查询。它只是不渲染。

在模拟器中重新加载将再次正确渲染应用程序，直到我们离开 React Native 然后返回。

奇怪：如果我们打开远程JS调试，突然一切正常。

所以我们的问题：

谁能发现我们在使用 StackNavigator 的过程中可能遗漏了什么，即无法正确渲染？再次：当 JS 调试器打开时它工作正常，让我们认为它不是一个逻辑项，而可能是一个时间条件，或者一些微妙的配置？还是我们应该放弃 react-navigation 并转到不同的导航库？

问题的简单再现

我们的 package.json 是：

{
  "dependencies": {
    "react": "16.0.0",
    "react-native": "0.50.4",
    "react-navigation": "1.5.2"
  }
}

我们的 React Native 入口页面（index.js）是：

import * as React from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import TestPage from './TestPage';

AppRegistry.registerComponent('MyApp', () => MyApp);

class MyApp extends React.Component {
  public render() {
    return (
      <View style={{flex:1}}>
        <Text>'This text always shows up fine on Android, even on reentry to React application'</Text>
        <AccountNavigator />
      </View>
    );
  }
}

const AccountNavigator = StackNavigator(
  {
    FirstPage: {
      screen: TestPage,
      navigationOptions: ({ navigation }) => ({
        title: 'Test View'
      })
  },
  {
    initialRouteName: 'FirstPage'
  }
);

简单的测试页面（TestPage.js）就是：

import * as React from 'react';
import { Text, View } from 'react-native';

export default class TestPage extends React.Component {
  render() {
    return (
      <View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>'If you can read this, then the app is on first load. But return to the native portion and then try to come back to React Native and you will not see me.'</Text>
      </View>
    );
  }
}

【问题讨论】：

从您所描述的情况来看，这听起来确实像是一种竞争条件。但我需要查看更多代码（一些与此相关的本机代码..）来尝试提出问题的原因。不管你可以试试这个库：github.com/wix/react-native-navigation
@HedShafran 感谢您对 react-native-navigation 的建议。我一直在想那个图书馆，所以昨晚看了一下。但据我所知，它纯粹针对 iOS，主要是为了利用 iOS 选项卡式导航，而且设置文档似乎也支持这个想法。在我的特殊情况下，我们的问题与 Android 有关，我们不想要选项卡式导航，而是在用户完成表单时通过堆叠屏幕进行导航。

标签： android react-native react-navigation

【解决方案1】：

原来是布局设置问题。在我们的原生代码中，在我们的 React Activity 布局 XML 中，我们有：

 <com.facebook.react.ReactRootView
    android:id="@+id/ReactRootView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

问题出在高度的“wrap_content”中，导致它将StackNavigator() 渲染为1 像素高。不知道为什么它总是只在重新进入而不是第一次发生，也不知道为什么 JS 调试器会导致问题消失。

将 layout_height 更改为“match_parent”完全解决了这个问题。

【讨论】：