Использование Context API с response-native-router-flux сбрасывает стек, когда я использую setState () для компонента App

Question

Я использую кодирование приложения React Native. Я решил использовать Context API React для передачи глобального состояния дочерним компонентам, а также для передачи некоторых обратных вызовов, которые вызовут setState () в компоненте App. Я использую response-native-router-flux для навигации между компонентами (страницами). У меня нет проблем с чтением состояния приложения, но когда я устанавливаю setState (), я автоматически возвращаюсь на начальную страницу компонента. setState () хорошо называется.

Я уже пытался вернуть false в ComponetShouldUpdate () маршрутизатора без успеха ...

экспортировать класс по умолчанию Routes extends Component {render () {return ( `)}}

Вот мой класс приложения, в котором я храню 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

Сейчас я использую реагирующую навигацию, так как реакция-нативный-маршрутизатор-поток активно не поддерживается