Question

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

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

Answer 1

我知道了。希望这可以帮助其他人。在下面的选项中添加导航。

options = {（{navigation，route}）=>（{ headerRight：（）=> { 返回（

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

        })}
    />

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

1 个答案: