Я работаю с последней версией встроенной навигации и пытаюсь перейти на следующий экран с помощью своего значка. Не повезло. Я пытался передать функцию в свой код, но ни к чему не ушел. Я знаю, что это просто, я могу просто пропустить один простой фрагмент, чтобы это сделать. См. Ниже. Кто-нибудь знает, как правильно написать навигацию.
Моя проблема связана с экраном стека «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;