Question

我有一个自定义标题组件，带有下拉列表，当我更改下拉列表时，我将setYear发送到更新状态，此后react-navigation将我发回我的主页/默认路由，即使我使用了导航并指定了相同的页面。如何更改状态并保持在同一页面/组件视图中？

自定义标题：

   onYearChange(e) {
      const { navigate, setYear } = this.props; 
      // dispatch action to change state
      setYear(e);

  }

  <View style={styles.alignMenu}>
      {this.state.year ? (
        <Picker
          selectedValue={year}
          label="Year"
          onChange={this.onYearChange}
          options={categories}
          style={styles.picker}
        />
      ) : (
        <View style={styles.alignMenu}>
          <TouchableHighlight
            onPress={() => this.show({ year: !this.state.year })}
          >
            <Text>
              {
                categories.find(category => {
                  return category.id == year;
                }).label
              }
            </Text>
          </TouchableHighlight>

MapDispatchToProps：

const mapDispatchToProps = dispatch => {
  return {
    setGroup: (group, categories, year) =>
      dispatch(setGroup(group, categories, year)),
    setYear: year => dispatch(setYear(year)),
    setStudent: student => dispatch(setStudent(student)),
    navigate: route => dispatch(navigate(route))
  };
};

AppNavigator：

const AppNavigator = StackNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => ({
            header: false
        })
    },
    Month: {
        screen: Month
    },
    Day: {
        screen: Day
    }
});

setYear使用我的setCredentials缩减器更新凭据

export function setCredentials(state = initialState, action) {
    switch (action.type) {
        case "SET_YEAR":
            return {
                ...state,
                year: action.year,
                student: 0
            };
        case "SET_STUDENT":
            return { ...state, student: action.student };
        case "SET_GROUP":
            const showStudent = !checkEmptyArray(action);
            return { ...state, group: action.group, showStudent };
        case "CLEAR_CREDENTIALS":
            return initialState;

        default:
            return state;
    }
}

使用您在homescreen或customheader上的表单设置的凭据，我会在month视图中获取所有数据：

componentDidMount() {
    const { year, group, student } = this.props.credentials;
    const Id = student || group || year;
    this.props.dispatch(fetchEvents(Id));
}

我更改fetchEvents(Id)以更新应用中的数据后，如何在标题中发送操作year？

反应导航 - 在状态更新后导航到默认路由

0 个答案: