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

Question

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

我已经尝试在路由器的ComponetShouldUpdate（）中返回false，但没有成功...

导出默认类Routes扩展组件{render（）{返回（`）}}

这是我的App类，在其中存储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