React Native：无法访问导航参数

Question

我目前需要有关 React Native 导航问题的帮助。我的目标是将 'userid' 传递到我的详细信息屏幕，但它不起作用

包版本：

"@react-navigation/native": "^6.0.7",
    "@react-navigation/native-stack": "^6.3.0"

我的代码：


export default function MessagesScreen({navigation}: any) {
  const [loading, setLoading] = React.useState(false);
  const [messages, setMessages] = React.useState([]);

  useEffect(() => {
    loadChatrooms();
  }, []);
  const goToMessageDetail = (id: number) => {
    console.log('goToMessageDetail', id);
    navigation.navigate('MessageDetail', {userid: id});
  };
}


export function MessageDetailScreen({navigation}: any) {
  const [user, setUser] = React.useState('');
  const [userid, setUserid] = React.useState('');
  const [chatpartnerId, setChatpartnerId] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [messages, setMessages] = React.useState([]);
  //needs to fetch chatroom details

  useEffect(() => {
**//=> I can't access the param : console.log says there is nothing**
    setChatpartnerId(navigation.getParam('userid'));
}
}

导航配置

const screens = [
Messages: {
    screen: MessagesScreen,
  },
  MessageDetail: {
    screen: MessageDetailScreen,
  },
]

const HomeStack = createStackNavigator(screens, {
  defaultNavigationOptions: {
    headerStyle: {
      borderBottomWidth: 0,
      elevation: 0,
      shadowOpacity: 0,
      height: 0,
    },
    headerTintColor: 'rgba(0,0,0,0.0)',
  },
});
export default createAppContainer(HomeStack);

我错过了什么吗？非常感谢您的帮助

Answer 1

您访问导航参数的方式有误。这在 react-navigation 版本 5 中已更改。您需要通过路由对象访问路由参数，如下所示。

export function MessageDetailScreen({ route, navigation }) {
   const { userid } = route.params; // desctructure the route params

   ...

}

将此行为与 official documentation 中的指南进行比较。

React Native：无法访问导航参数

React Native: Cannot Access navigation param

javascript

typescript

react-native

react-navigation