Блог

Я новичок в react native и получаю эту ошибку:

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 она начала выдавать ошибку.

Чтобы получить навигационный реквизит, этот компонент должен быть частью навигации.

Вы можете справиться с этим по-другому, как показано ниже

 <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>
                ),
            })} />
 

Параметры передают навигацию заданной функции, которую вы можете использовать и получить доступ к навигации.