Reactjs react导航使用react上下文包装根AppContainer

我正在寻找使用react导航在我的react本机应用程序中管理全局状态的方法。我试图实现基本的React上下文，我想围绕React导航的

createAppContainer（）

方法来实现它，但它不起作用

最后，我使用上下文的HOC从

index.js

文件包装了一个应用程序容器，但当上下文的状态更改时，react导航似乎在重新呈现嵌套组件方面存在问题。我可以从嵌套组件访问上下文，但当上下文状态更改时，它们不会被呈现

我的

index.js

文件如下所示：

import { AppRegistry } from "react-native";
import App from "./src/App";
import { withAppContextProvider } from "./src/AppContext";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => withAppContextProvider(App));

// for new react static context API
export const AppContext = createContext({});

// create the consumer as higher order component
export const withAppContext = ChildComponent => props => (
  <AppContext.Consumer>
    {context => <ChildComponent {...props} global={context} />}
  </AppContext.Consumer>
);

// create the Provider as higher order component (only for root Component of the application)
export const withAppContextProvider = ChildComponent => props => (
  <AppContextProvider>
    <ChildComponent {...props} />
  </AppContextProvider>
);

export class AppContextProvider extends Component {
  state = {
    isOnline: true
  };

  handleConnectivityChange = isOnline => {
    this.setState({ isOnline });
  };

  componentDidMount = async () => {
    NetInfo.isConnected.addEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  };

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  }

  render() {
    return (
      <AppContext.Provider
        value={{
          ...this.state
        }}
      >
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Cities: CitiesScreen
  },
  getStackConfig({ initialRouteName: "Home" })
);

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen
  },
  getStackConfig({ initialRouteName: "Settings" })
);

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: HomeStack,
      Settings: SettingsStack
    }
  )
);

我的上下文类如下所示：

import { AppRegistry } from "react-native";
import App from "./src/App";
import { withAppContextProvider } from "./src/AppContext";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => withAppContextProvider(App));

// for new react static context API
export const AppContext = createContext({});

// create the consumer as higher order component
export const withAppContext = ChildComponent => props => (
  <AppContext.Consumer>
    {context => <ChildComponent {...props} global={context} />}
  </AppContext.Consumer>
);

// create the Provider as higher order component (only for root Component of the application)
export const withAppContextProvider = ChildComponent => props => (
  <AppContextProvider>
    <ChildComponent {...props} />
  </AppContextProvider>
);

export class AppContextProvider extends Component {
  state = {
    isOnline: true
  };

  handleConnectivityChange = isOnline => {
    this.setState({ isOnline });
  };

  componentDidMount = async () => {
    NetInfo.isConnected.addEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  };

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  }

  render() {
    return (
      <AppContext.Provider
        value={{
          ...this.state
        }}
      >
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Cities: CitiesScreen
  },
  getStackConfig({ initialRouteName: "Home" })
);

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen
  },
  getStackConfig({ initialRouteName: "Settings" })
);

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: HomeStack,
      Settings: SettingsStack
    }
  )
);

CitiesScreen

组件示例：

import { AppContext } from "../AppContext";

class CitiesScreen extends Component {
  static contextType = AppContext;

  render() {
    return (
      <View style={styles.container}>
        <Text>This value should change on isOnline update: {this.context.isOnline}</Text>
      </View>
    );
  }
}

从“./AppContext”导入{AppContext}；
类CitiesScreen扩展组件{
静态contextType=AppContext；
render（）{
返回(
此值应在isOnline更新时更改：{This.context.isOnline}
);
}
}

---

现在，当我从例如

CitiesScreen

组件访问上下文时，我当前能够获得

isOnline

上下文状态的值，但每当我打开/关闭internet连接（在android emulator上）时，上下文状态会发生更改，但组件不会重新呈现，并且我的

应该组件更新（）

方法未被触发。有什么帮助吗？

在我的例子中，我将React从16.8降级到16.5.0，React导航版本是3。

---

我仍在调查，但这只是暂时的解决办法。

没有人帮忙吗？