undefined 不是 onPress 的对象（评估 this.props.navigation.navigate）答案

【问题标题】：undefined is not an object (evaluating this.props.navigation.navigate) for onPressundefined 不是 onPress 的对象（评估 this.props.navigation.navigate）
【发布时间】：2021-01-18 05:02:20
【问题描述】：

我是新手反应原生并收到此错误：

undefined 不是对象（评估 this.props.navigation.navigate）

这是一个非常常见的错误，但原因可能不同，因为我无法通过查看类似问题的其他答案来解决它。

我的屏幕上有这个代码：

function MyClientsScreen(props) {

    return (
        <Stack.Navigator>
            <Stack.Screen name='Clients' component={ClientSrc} options={{
                title: 'My Clients',
                headerRight: () => (
                    <TouchableOpacity onPress={() => props.navigation.navigate('AddClients')}>
                        <Image source={require('../assets/addClient.png')} style={styles.addBtnImg} />
                    </TouchableOpacity>
                ),
            }} />
            <Stack.Screen name='AddClients' component={AddClientSrc} options={{
                title: 'Add New Client',
                headerRight: () => (
                    <TouchableOpacity>
                        <Text style={styles.headerButtton}>Save</Text>
                    </TouchableOpacity>
                )
            }} />
        </Stack.Navigator>
    );
}

当前屏幕上的headerRight 按钮在按下时应导航到AddClients（位于堆栈导航中）。

navigation 没有在任何地方定义，当我将按钮代码放在我创建 const ClientSrc = ({ navigation }) => {... 的函数中时，我能够做到这一点，但是当我将按钮移动为 headerRight 按钮时，onPress 开始了抛出错误。

【问题讨论】：

标签： javascript reactjs react-native react-native-navigation stack-navigator

【解决方案1】：

为了获得一个导航道具，该组件应该是导航的一部分。

你可以像下面这样不同地处理这个

<Stack.Screen name='Clients' component={ClientSrc} options={({ navigation }) => ({
                title: 'My Clients',
                headerRight: () => (
                    <TouchableOpacity onPress={() => navigation.navigate('AddClients')}>
                        <Image source={require('../assets/addClient.png')} style={styles.addBtnImg} />
                    </TouchableOpacity>
                ),
            })} />

选项将导航传递给给定的功能，您可以使用该功能并访问导航。

【讨论】：