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

【问题标题】：Passing navigation params in react-navigation to component's methods将 react-navigation 中的导航参数传递给组件的方法
【发布时间】：2020-03-27 07:21:58
【问题描述】：

试图弄清楚参数是如何在react-navigation 中传递的。一旦用户使用左侧标题按钮从过滤器中选择了一个选项，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>
        );
    }
}

【问题讨论】：

不知道你为什么要像这样使用react-navigation。通常，您只需直接从操作表回调中调用此 loadItems。
是的，操作表没有引用this。
最简单的解决方案可能是在操作表回调中发出一个事件，并将其绑定到loadItems

标签： android ios react-native navigation react-navigation

【解决方案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>
        );
    }
}

【讨论】：