反应本机导航在屏幕之间移动

Question

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

我的问题是堆栈屏幕"产品视图屏幕"。

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;

Answer 1

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

选项={({导航，路线}( => ({ 标题右： (( => { 返回 (

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