当我在 App 组件上使用 setState() 时，将 Context API 与 react-native-router-flux 一起使用会重置堆栈

Question

我正在编写 React Native 应用程序。我决定使用 React 的 Context API 将全局状态传递给子组件，并传递一些回调，这将调用 App 组件中的 setState() 。我使用 react-native-router-flux 在组件（页面）之间导航。通过读取 App 状态我没有任何问题，但是当我 setState() 时，我会自动返回到初始组件页面。 setState() 叫得好

我已经在路由器的 ComponetShouldUpdate() 中尝试 return false 但没有成功...

export default class 路由扩展组件{ 使成为（） { return ( ` ) }}

这是我的应用 class，我在其中存储了 globalState。

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.clearData = this.clearData.bind(this)
    this.storeData = this.storeData.bind(this)

    this.state = {
      isReady: false,
      calendar: [],
      best: 0,
      bestPercent: "0 %",
      clearData: this.clearData,
      storeData: this.storeData,
    };
  }

  clearData = async () => {
    const asyncStorageKeys = await AsyncStorage.getAllKeys();
    if (asyncStorageKeys.length > 0) {
      await AsyncStorage.clear();
    }
    this.setState({
      best: 0,                           //
      calendar: [],                      //
      bestString: secondsToHms(0),       //
      bestPercent: getPercent(0),        // If I delete these lines, react-native-router-flux won't reset
    }); 
    }

  storeData = async (result) => {
    let today = new Date();
    let data = {}
    data.date = today
    data.result = result
    let calendar = this.state.calendar;
    let foundIndex = calendar.findIndex(element => sameDay(new Date(element.date), today));
    if (foundIndex === -1) {
        calendar.push(data)
    } else {
        if (calendar[foundIndex].result < result) {
            calendar[foundIndex].result = result;
        }
    }

    try {
        await AsyncStorage.setItem('calendar', JSON.stringify(calendar))
        this.state.calendar = calendar;
        if (result > this.state.best) {
            await AsyncStorage.setItem('best', result.toString())

            this.setState(state => ({               //
              best: result || 0,                    //
              bestString: secondsToHms(result),     //
              bestPercent: getPercent(result),      //
            }));                                    //  If I delete these lines, react-native-router-flux won't reset

        }
    } catch (e) {}
    }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Chintok: require('native-base/Fonts/Chintok.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      Minecraft: require('native-base/Fonts/Minecraft.ttf'),
      ...Ionicons.font,
    });
    await this.loadBest();
    await this.loadCalendar();    
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <GlobalStateContext.Provider value={this.state}>
        <StyleProvider style={getTheme(material)}>
          <Container >
            <Routes />
          </Container>
        </StyleProvider>
      </GlobalStateContext.Provider>
    );
  }
}

Answer 1

我现在使用 react-navigation，因为 react-native-router-flux 没有得到积极维护

当我在 App 组件上使用 setState() 时，将 Context API 与 react-native-router-flux 一起使用会重置堆栈

Using Context API with react-native-router-flux resets the stack when I use setState() on the App component

reactjs

react-native

react-native-router-flux

react-context