Я ищу способ управления глобальным состоянием в моем приложении-реактиве с использованием реагирования-навигации.Я попытался реализовать базовый контекст React, который я хотел обернуть вокруг метода createAppContainer() реагирующей навигации, но он не работал.
В итоге я обернул контейнер приложения из файла index.js, используя контекстную HOC, но похоже, что у реакции-навигации есть проблема с повторным рендерингом вложенных компонентов, когда состояние контекста изменяется.Я могу получить доступ к своему контексту из вложенных компонентов, но они просто не перерисовываются при изменении состояния контекста.
Мой 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>
);
}
}
мой App.js файл выглядит так:
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>
);
}
}
Теперь, когда я обращаюсьКонтекст, например, из компонента CitiesScreen, в настоящее время я могу получить значение состояния контекста isOnline, но всякий раз, когда я включаю / выключаю свое подключение к Интернету (на эмуляторе Android), состояние контекста изменяется, но компонентне перерисовывается, и мой метод shouldComponentUpdate() не запускается.Любая помощь, чтобы сделать эту работу?