将 react-navigation 中的导航参数传递给组件的方法

Question

试图弄清楚参数是如何在 react-navigation 中传递的。一旦用户使用左侧 header 按钮从过滤器中选择了一个选项，就应该使用该过滤器作为参数调用 loadItems(filter)。我如何捕捉此类事件？

export default class FavoritesView extends Component {
    static navigationOptions = ({navigation}) => ({
        headerLeft: (
            <Button
                onPress={()=>{FavoritesView.showFilteringMenu(navigation)}}
                title="Filter"
            />
        ),
    });
    static showFilteringMenu(navigation) {
        let FILTERS = [
            'A',
            'B',
            'C'
        ];
        ActionSheet.showActionSheetWithOptions({
                title: "Filter options",
                options: FILTERS
            },
            (buttonIndex) => {
                navigation.setParams({
                    selectedOption: FILTERS[buttonIndex]
                }); // A parameter is set here
            });
    }
    loadItems(filter) { // This function should be called
        StorageService.getItems(filter).then(v => this.setState({ data: v }));
    }
    render() {
        let {navigation} = this.props;
        return (
            <SafeAreaView style={styles.container}>
                <NavigationEvents
                    onWillFocus={payload => this.loadItems()} // This works only for initial load
                />
            </SafeAreaView>
        );
    }
}

Answer 1

这是我使用 navigation.getParam() 和 navigation.setParams() 解决问题的方法。

export default class FavoritesView extends Component {
    static navigationOptions = ({navigation}) => ({
        headerLeft: (
            <Button
                onPress={navigation.getParam('showFilteringMenu')}
                title="Filter"
            />
        ),
    });
    static showFilteringMenu() {
        let FILTERS = [
            'A',
            'B',
            'C'
        ];
        ActionSheet.showActionSheetWithOptions({
                title: "Filter options",
                options: FILTERS
            },
            (buttonIndex) => {
                this.selectedFilter = FILTERS[buttonIndex];
                this.loadItems(this.selectedFilter);
            });
    }
    componentDidMount() {
        this.props.navigation.setParams({
            showFilteringMenu: this._showFilteringMenu.bind(this)
        });
    }
    loadItems(filter) { // This function should be called
        StorageService.getItems(filter).then(v => this.setState({ data: v }));
    }
    render() {
        let {navigation} = this.props;
        return (
            <SafeAreaView style={styles.container}>
                <NavigationEvents
                    onWillFocus={payload => this.loadItems()} // This works only for initial load
                />
            </SafeAreaView>
        );
    }
}