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

Posted 2023-02-23

【中文标题】反应原生导航在屏幕之间移动

【英文标题】：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;

【参考方案1】：

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

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

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

        )
    />