反应原生导航在屏幕之间移动答案

【问题标题】：react native navigation move between screens反应原生导航在屏幕之间移动
【发布时间】：2020-05-11 20:57:37
【问题描述】：

我正在使用最新的 react 原生导航并尝试从我的图标进入下一个屏幕。没有运气。我试图将一个函数传递到我的代码中，但我无处可去。我知道这很简单，我可能只是缺少一个简单的 sn-p 来完成这项工作。请看下文。有谁知道如何正确编写导航。

我的问题是堆栈屏幕“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;

【问题讨论】：

标签： react-native react-navigation react-navigation-stack

【解决方案1】：

我想通了。希望这对其他人有所帮助。在如下选项中添加导航。

options={({导航, 路线}) => ({ headerRight: () => { 返回（

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

        })}
    />

【讨论】：