反应导航 route.params 未定义

Posted 2023-03-08

【中文标题】反应导航 route.params 未定义

【英文标题】：React navigaton route.params undefined

【发布时间】：2021-06-18 11:24:43

【问题描述】：

我正在使用 react naviagtion 开发聊天应用程序。有 2 个屏幕：房间列表 - 列出所有可用的聊天室，带有前往给定房间的按钮和房间 - 基本上是聊天窗口。

当尝试通过按钮将参数传递给路由时，我收到错误“无法读取未定义的属性 'roomID'”。我已经按照文档做了所有事情：https://reactnavigation.org/docs/params

我想在进入给定房间时传递此参数（我从查询中获得的 room.id）以进行特定查询。

有人知道为什么它不起作用吗？

这是我的设置：

const Stack = createStackNavigator();

export default function App() 
  return (
    <ApolloProvider client=client>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home Screen / Room list" component=HomeScreen />
          <Stack.Screen
            name="Room"
            component=RoomScreen
            options= title: "Room id:" 
          />
        </Stack.Navigator>
      </NavigationContainer>
    </ApolloProvider>
  );

function HomeScreen( navigation ) 
  const  data, loading, error  = useQuery(GET_ROOMS);
  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error :(</Text>;
  );

  return data.usersRooms.rooms.map((room: Room) => (
    <View
      style= width: 500, marginLeft: "auto", marginRight: "auto" 
      key=room.id
    >
      <View style=styles.roomListItem>
        <Image
          style=styles.roomPic
          source=
            uri:
              room.roomPic !== ""
                ? room.roomPic
                : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png",
          
        />
        <View>
          <Text>room.name</Text>
          <Button
            title="Go to room"
            onPress=() => 
              navigation.navigate("Room",  roomID: room.id );
              console.log("clicked room id: " + room.id);
            
          />
        </View>
      </View>
    </View>
  ));

function RoomScreen(route, navigation) 
  const  roomID  = route.params; // Cannot read property 'roomID' of undefined
  //const roomID = "33290044-5232-46be-9302-210f5291905b"; //hardcoded value
  const  data, loading, error  = useQuery(GET_MESSAGES, 
    variables:  roomID: roomID ,
  );
//fragment

【参考方案1】：

解决办法：

function RoomScreen(props) 
  const roomID = props.route.params.roomID;

【讨论】：

或function RoomScreen( route, navigation ) ?

【参考方案2】：

函数RoomScreen返回props(object)，里面有params，navigation等props，所以你可以这样使用

function RoomScreen(props) 
  const roomID = props.route.params;
  ...

或者你可以像这样解构返回的对象

function RoomScreen(route, navigation) 
  const roomID = route.params;
  ...

正如您在 HomeScreen 中所做的那样。