реагировать на родную навигацию перемещаться между экранами

Я работаю с последней версией встроенной навигации и пытаюсь перейти на следующий экран с помощью своего значка. Не повезло. Я пытался передать функцию в свой код, но ни к чему не ушел. Я знаю, что это просто, я могу просто пропустить один простой фрагмент, чтобы это сделать. См. Ниже. Кто-нибудь знает, как правильно написать навигацию.

Моя проблема связана с экраном стека «ProductOverViewScreen».

import * as React from 'react';
import { createStackNavigator, createAppContainer } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import 'react-native-gesture-handler';
import { Platform, Button } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

import ProductsOverViewScreen from '../screens/shop/ProductOverViewScreen';
import ProductDetailScreen from '../screens/shop/ProductDetailScreen';
import CartScreen from '../screens/shop/CartScreen';
import Color from '../constants/Color';
import HeaderButton from '../components/UI/HeaderButton';

const Stack = createStackNavigator();



const newScreen = ({navigation}) => {
    navigation.navigate('CartScreen');
}

function ShopNavigator(){
    return(
    <NavigationContainer>
    <Stack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: Platform.OS === 'android' ? Color.primary : ''
            },     
            headerTitleStyle: {
                fontFamily: 'open-sans-bold'
            },
            headerBackTitleStyle: {
                fontFamily: 'open-sans'
            },
            headerTintColor: Platform.OS === 'android' ? 'white' : Color.primary,
        }}
        >
    <Stack.Screen 
        name="ProductsOverViewScreen" 
        component={ProductsOverViewScreen}
        options={{
            headerRight: ({ navigation}) =>  (
                <Button
                onPress={() => navigation.navigate('CartScreen')}
                title="Cart"
                color='black'
              />
            ),
        }}
        />
    <Stack.Screen 
        name="ProductDetailScreen" 
        component={ProductDetailScreen} 
        options={({route}) => ({title: route.params.productTitle})}
        />
    <Stack.Screen 
        name="CartScreen" 
        component={CartScreen} 
        />
    </Stack.Navigator>
    </NavigationContainer>
    );
}


export default ShopNavigator;

person Kieran    schedule 11.05.2020    source источник


Ответы (1)


Я понял. надеюсь, что это поможет кому-то другому. Добавьте навигацию в опциях, как показано ниже.

options = {({навигация, маршрут}) => ({headerRight: () => {return (

            <TouchableHighlight onPress={() => {navigation.navigate('CartScreen')}}>
                <Text>Test</Text>
            </TouchableHighlight>
        );
            }

        })}
    />
person Kieran    schedule 12.05.2020