Question

我有一个简单的应用程序，在StackNavigator：

中有两个屏幕

export const AppNavigator = StackNavigator({
    Main: { screen: MainPage },
    ChooseColor: { screen: ChooseColorPage }
}, {
    initialRouteName: 'Main',
});

按下按钮后，应用会导航至ChooseColorPage：

class MainPage extends Component {

    onChooseColor() {
        const { navigation } = this.props;
        navigation.navigate('ChooseColor', {});
    }
}

然后，用户可以通过按下按钮来选择颜色，这会触发导航回MainPage：

class ChooseColorPage extends Component {

    onSelectColor(colorKey) {
        // this updates the state inside a `ColorReducer`
        this.props.colorChanged({ colorKey });
        const { navigation } = this.props;
        navigation.goBack();
    }
}

我希望MainPage根据所选颜色进行更新，但 render()方法不会在后退导航中调用。

问题：在使用render()的屏幕之间导航时调用的react-navigation方法是哪种情况？

我会假设更新ColorReducer中的状态足以触发render()中的MainPage来电，但这不会发生。

Answer 1

原来这不是导航问题，而是状态管理问题。

我在主页上错误地设置了mapStateToProps。添加此内容后，导航更新会调用render()。

我的app reducer：

const AppReducer = combineReducers({
  color: ColorReducer,
  nav: NavReducer,
});

我的ColorReducer：

const initialState = {
    colorKey: null,
};

const ColorReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'COLOR_CHANGED':
            return { ...state, colorKey: action.payload.colorKey };
        default:
            return state;
    }
};

我的mapStateToProps：

const mapStateToProps = state => {
    return { colorKey: state.color.colorKey };
};

如何在使用`react-navigation`导航时触发render（）方法？

1 个答案: