React native 在react本机导航中将参数传递到路由时出现问题`route.params`未定义。抱歉，我有能力以本机方式进行响应

这是我的主页。我要导航到bookings页面，同时将

uuid

作为参数传递到bookings页面

import React from "react";
import {
  Text,
  View,
  StatusBar,
  ActivityIndicator,
  StyleSheet,
  SafeAreaView,
  TextInput,
  TouchableOpacity,
} from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import APIKit from "../config/api/APIKit";
import Icon from "react-native-vector-icons/Feather";
import Card from "../components/Card";
import { ScrollView } from "react-native-gesture-handler";

function HomeScreen({ navigation }) {
  const [loading, setLoading] = React.useState(true);
  const [items, setItems] = React.useState([]);
  const [limit, setLimit] = React.useState(7);
  const image = require("../assets/pic1.jpg");

  useFocusEffect(
    React.useCallback(() => {
      getData();
      return () => {
        setItems([]);
        setLimit(9);
      };
    }, [])
  );

  const getData = () => {
    setLoading(true);

    APIKit.get(`items/?limit=${limit}&offset=1`)
      .then((res) => {
        console.log(res.data);
        setLimit(limit + 6);
        setItems([items, ...res.data.results]);
        setLoading(false);
      })
      .catch((e) => console.log(e.request.response));
  };

  return (
    <SafeAreaView
      style={{ alignItems: "flex-start", justifyContent: "center" }}
    >
      <StatusBar style="auto" />
      <View style={{ padding: 8 }}>
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            width: "100%",
            marginTop: 5,
          }}
        >
          <TextInput
            placeholder={"Enter Item Name"}
            style={{
              flex: 1,
              backgroundColor: "white",
              height: 40,
              borderColor: "black",
              borderWidth: 1,
              borderRadius: 5,
              margin: 2,
              paddingLeft: 8,
            }}
          />
          <TouchableOpacity
            style={{
              alignItems: "center",
              alignSelf: "center",
              borderWidth: 1,
              width: 50,
              borderRadius: 500,
            }}
          >
            <Icon name="search" size={25} />
          </TouchableOpacity>
        </View>
        <View style={{ flex: 1, marginTop: 20 }}>
          <ScrollView>
            <View
              style={{
                flex: 1,
                flexDirection: "row",
                flexWrap: "wrap",
                justifyContent: "flex-start",
              }}
            >
              {items !== []
                ? items.map((item, key) => {
                    return (
                      <Card
                        key={key}
                        name={item.item_name}
                        description={item.description}
                        onHandlePress={() =>
                          navigation.navigate("payment-options", {
                            uuid: item.uuid,
                            price: item.cost,
                          })
                        }
                        image={image}
                      />
                    );
                  })
                : null}
            </View>
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={getData}
              //On Click of button load more data
              style={styles.loadMoreBtn}
            >
              <Text style={styles.btnText}>Load More</Text>
              {loading ? (
                <ActivityIndicator color="white" style={{ marginLeft: 8 }} />
              ) : null}
            </TouchableOpacity>
          </ScrollView>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  footer: {
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
  },
  loadMoreBtn: {
    padding: 10,
    width: 350,
    marginHorizontal: 20,
    alignSelf: "center",
    backgroundColor: "#01ab9d",
    borderRadius: 4,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  btnText: {
    color: "white",
    fontSize: 15,
    textAlign: "center",
  },
});

export default HomeScreen;

从“React”导入React；
进口{
文本，
看法
状态栏，
活动指示器，
样式表，
安全区域视图，
文本输入，
可触摸不透明度，
}从“反应本族语”；
从“@react navigation/native”导入{usefocusefect}”；
从“./config/api/APIKit”导入APIKit；
从“反应本机矢量图标/羽毛”导入图标；
从“./组件/卡片”导入卡片；
从“反应本机手势处理程序”导入{ScrollView}；
功能主屏幕（{navigation}）{
常量[loading，setLoading]=React.useState（true）；
const[items，setItems]=React.useState（[]）；
const[limit，setLimit]=React.useState（7）；
const image=require（“../assets/pic1.jpg”）；
聚焦效应(
React.useCallback（（）=>{
getData（）；
return（）=>{
集合项目（[]）；
设定上限（9）；
};
}, [])
);
常量getData=（）=>{
设置加载（真）；
get（`items/？limit=${limit}&offset=1`）
。然后（（res）=>{
console.log（res.data）；
设置限制（限制+6）；
setItems（[items，…res.data.results]）；
设置加载（假）；
})
.catch（（e）=>console.log（e.request.response））；
};
返回(
{项目！=[]
？项目图（（项目，关键）=>{
返回(
导航。导航（“付款选项”{
uuid:item.uuid，
价格：项目成本，
})
}
image={image}
/>
);
})
：null}
加载更多
{加载(
)：null}
);
}
const styles=StyleSheet.create({
页脚：{
填充：10，
辩护内容：“中心”，
对齐项目：“中心”，
flexDirection:“行”，
},
loadMoreBtn：{
填充：10，
宽度：350，
marginHorizontal:20，
对准自己：“居中”，
背景色：“01ab9d”，
边界半径：4，
flexDirection:“行”，
辩护内容：“中心”，
对齐项目：“中心”，
},
btnText:{
颜色：“白色”，
尺寸：15，
textAlign：“居中”，
},
});
导出默认主屏幕；

预订页面如下所示

import { Text, View, StatusBar, SafeAreaView, StyleSheet } from "react-native";
import { Button } from "react-native-elements";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

function PaymentOptionScreen(props) {
  return (
    <SafeAreaView
      style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
    >
      <StatusBar style="auto" />
      <View style={{ flex: 1, justifyContent: "flex-start", margin: 20 }}>
        <Button
          title="Pay Now"
          onPress={() =>
            console.log(props.route.params)
          }
          containerStyle={styles.ButtonContainer}
          buttonStyle={{ height: 60, justifyContent: "flex-start" }}
          icon={<Icon name="cash" size={40} color="white" />}
        />
        <Button
          title="Pay on delivery"
          containerStyle={styles.ButtonContainer}
          buttonStyle={{ height: 60, justifyContent: "flex-start" }}
          icon={<Icon name="cash" size={40} color="white" />}
        />
      </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  ButtonContainer: {
    width: 380,
  },
});

export default PaymentOptionScreen;

从“react native”导入{文本、视图、状态栏、安全区域视图、样式表}；
从“react native elements”导入{Button}；
从“反应本机矢量图标/材料通信图标”导入图标；
功能付款选项屏幕（道具）{
返回(
console.log（props.route.params）
}
containerStyle={styles.ButtonContainer}
buttonStyle={{height:60，justifyContent:“flex start”}
图标={}
/>
);
}
const styles=StyleSheet.create({
按钮容器：{
宽度：380，
},
});
屏幕上的导出默认付款选项；

下面是app.js的一段代码，它可能会有所帮助

<AuthContext.Provider value={authContext}>
                <NavigationContainer>
                    <Drawer.Navigator
                        initialRouteName="Home"
                        drawerContent={(props) => <DrawerContent {...props} />}
                    >
                        <Drawer.Screen name="Home" component={HomeStackScreen}/>
                        <Drawer.Screen name="Profile" component={ProfileStackScreen}/>
                        <Drawer.Screen name="Bookings" component={BookingsStackScreen}/>
                        <Drawer.Screen name="payment-options" component={PaymentOptionsScreenStack}/>
                        <Drawer.Screen name="Add Item" component={AddItemStackScreen}/>
                        <Drawer.Screen name="Settings" component={SettingsStackScreen}/>
                        <Drawer.Screen name="Messages" component={MessagesStackScreen}/>
                    </Drawer.Navigator>
                </NavigationContainer>
            </AuthContext.Provider>

}
>

你能打印道具吗？我认为您必须将其作为对象{props}传递 如果您使用的是导航5.0。试试这个

    const  App=({navigation, route })=>{
  const uuid = route.param;
    return (
      <View</View>
    );
  
}

const-App=（{navigation，route}）=>{
const uuid=route.param；
返回(
这也给了我
未定义的
，是的，这是我在控制台记录props.route
时得到的“route”：Object{“key”：“payment-options-R3Cg3NAYeGPqGOr1ahDMq”，“name”：“payment options”，“params”：未定义，}，
你在使用导航5.0吗？我在使用
反应导航/本机：“^5.7.4