reactjs - React Native CLI 项目：如何在使用 react-navigation 时修复热重载

Question

我在 React Native CLI 项目中使用react-navigation ，这会破坏热重载。

标签： reactjsreact-native

Answer 1

为了解决这个问题，我发现我需要一个基于类的根组件，因为热重载不支持功能性根组件。我通过将导航组件包装在基于类的组件中来完成这项工作，如下所示：

class NavigationWrapper extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Menu" component={Menu} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

const App: () => React$Node = () => {
  return <NavigationWrapper />;
};