参数未在 React Native 的堆栈导航器中传递

Question

我有一个堆栈导航器：

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack'
import MainScreen from './../screens/MainScreen';
import ServiceScreen from './../screens/ServiceScreen';

const Stack = createStackNavigator();

function HomeNavigator(){
    return(
    <Stack.Navigator screenOptions={{
        headerShown: false
    }}>
        <Stack.Screen name="MainScreen" component={MainScreen} />
        <Stack.Screen name="ServiceScreen" component={ServiceScreen} />
    </Stack.Navigator>
    );
}

export default HomeNavigator;

现在我在 MainScreen

的按钮按下事件中有这行

navigation.navigate('ServiceScreen', {location: selectedLocation});

服务屏幕：在这里，ServiceApi 被导入并且是一个 apisauce post 函数。还有其他东西，比如分隔符和其他东西，都是我构建的组件。

function ServiceScreen({location}) {

    console.log(`ServicesScreen ${location}`);

    const [services, setServices] = useState();

    useEffect(() => {getServices()}, []);

    async function getServices(){
        const response = await ServicesApi.getServices();
        setServices(response.data);
    }

    if(!services) {
        return <AppText>No Services available!</AppText>
    }
    return (
        <Screen style={styles.container}>
            <View style={styles.location}>
                <AppText>{location}</AppText>
            </View>
                <Separator style={styles.separator} />
                <Separator style={styles.bar} />
            <ScrollView showsVerticalScrollIndicator={false}>
                {services.map(service => (
                    <View style={styles.subcat} key={service.id}>
                    <ServiceListItem name={service.name} img={servicePictures[service.img]} distance={service.distance} />
                    { service.id!=services[services.length-1].id && <Separator /> }
                    </View>
                ))}
            </ScrollView>  
        </Screen>
    );
}

我导航到 ServiceScreen，但 location 是 undefined

Answer 1

这是因为导航传递的参数可以在props.route.params中访问。所以在你的情况下它将是：

function ServiceScreen({route}) {

    console.log(`ServicesScreen ${route.params.location}`);

https://reactnavigation.org/docs/params

Answer 2

您可以使用route.params 来读取您在导航屏幕内通过导航传递的参数。在这里你的ServiceScreen应该是这样的。

function ServiceScreen({route}) {

    console.log(`ServicesScreen ${route.params.location}`);

    const [services, setServices] = useState();

    useEffect(() => {getServices()}, []);

    async function getServices(){
        const response = await ServicesApi.getServices();
        setServices(response.data);
    }

    if(!services) {
        return <AppText>No Services available!</AppText>
    }
    return (
        <Screen style={styles.container}>
            <View style={styles.location}>
                <AppText>{route.params.location}</AppText>
            </View>
                <Separator style={styles.separator} />
                <Separator style={styles.bar} />
            <ScrollView showsVerticalScrollIndicator={false}>
                {services.map(service => (
                    <View style={styles.subcat} key={service.id}>
                    <ServiceListItem name={service.name} img={servicePictures[service.img]} distance={service.distance} />
                    { service.id!=services[services.length-1].id && <Separator /> }
                    </View>
                ))}
            </ScrollView>  
        </Screen>
    );
}

参数未在 React Native 的堆栈导航器中传递

Parameters not passing in stack navigator in react native

react-native

stack-navigator