reactjs - 为什么 react-navigation 的 setParams() 在一个组件中工作而不是在另一个组件中工作？

Question

我在我的 react-native 应用程序的标题中设置了一个可触摸的 onPress 函数。本项目使用 react-navigation (v4) 功能是打开分享对话框。它在一个组件中完美运行，而完全相同的代码在另一个组件中根本不起作用，引发未定义的错误。

工作画面：

class WorkingScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            headerRight: () => (
                <TouchableOpacity onPress={navigation.state.params.onShare}>
                    <Image
                        source={require('../assets/img/white-share.png')}
                        style={{ height: 20, width: 20, marginRight: 20 }}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
            )
        }
    }
    {...}
    componentDidMount() {
        this.props.navigation.setParams({ onShare: () => this._onShare() })
    }
    _onShare = async () => {
        const uid = this.props.navigation.getParam('uid')

        const options = { title: uid, message: 'buggy af react-navigation' }

        Share.open(options)
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                err && console.log(err);
            });
    }
    {...}
}

工作屏幕路由配置：

Working: {
    screen: WorkingScreen,
    navigationOptions: () => ({
        title: 'Working'
    })
}

非工作屏幕：

class NotWorkingScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            headerLeft: () => (
                <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
                    <Image
                        source={require('../assets/img/menu.png')}
                        style={{ marginLeft: 20, height: 20, width: 25 }}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
            ),
            headerRight: () => (
                <TouchableOpacity onPress={navigation.state.params.onShare}>
                    <Image
                        source={require('../assets/img/white-share.png')}
                        style={{ height: 20, width: 20, marginRight: 20 }}
                        resizeMode={'contain'}
                    />
                </TouchableOpacity>
            )
        }
    }
    componentDidMount() {
        this.props.navigation.setParams({ onShare: () => this._onShare() })
    }
    {...}
    _onShare = async () => {
        const uid = this.props.navigation.getParam('uid')

        const options = { title: uid, message: 'buggy af react-navigation' }

        Share.open(options)
        .then((res) => {
            console.log(res);
        })
        .catch((err) => {
            err && console.log(err);
        });
    }
    {...}
}

非工作屏幕路由配置：

NotWorking: {
    screen: NotWorkingScreen,
    navigationOptions: () => ({
        title: 'Not Working'
    })
}

非工作屏幕的崩溃是：

TypeError：未定义不是对象（评估“navigation.state.params.onShare”）

它们具有相同的堆栈配置。我不知道这是怎么回事。有任何想法吗？

标签： reactjsreact-nativereact-navigation