Question

我们在React Native应用程序中遇到了一个非常离奇的反应导航场景，只能在Android上观察到（在模拟器和物理设备上 AND 用于调试版本以及发布版本），但它在iOS上运行良好。

上下文

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

我们的原生应用程序有一个侧边栏菜单，我们添加了一个新的菜单项，选中后，将用户带入React Native部分。他们当然可以随时导航回来，然后再回到React Native部分。

观察到的问题（仅在Android中出现）

我们发现它与反应导航库有关，但我们不知道我们做错了什么。

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

如果用户返回本机部分（通过后退键，或通过从侧栏菜单中选择其他选项）然后选择返回React Native部分，则StackNavigator部分不会返回到＃39 ; t display。 StackNavigator外部的其他React组件将被渲染。我们知道它会挂载包含的组件，因为其中一些组件正在进行API调用，我们会看到这些端点被查询。它只是没有呈现。

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

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

所以我们的问题：

任何人都可以发现我们在使用StackNavigator方面可能缺少什么，这是否使其无法正常渲染？再说一遍：当JS调试器打开时它工作正常，让我们认为它不是一个逻辑项，但可能是一个计时条件，或者一些微妙的配置？或者我们应该放弃反应导航并转到不同的导航库？

简单复制问题

我们的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>
    );
  }
}

Answer 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”完全解决了这个问题。

React Native StackNavigator在重新进入

上下文

观察到的问题（仅在Android中出现）

所以我们的问题：

简单复制问题

1 个答案: