如何在反应导航中将道具传递给模态？未定义的参数

Question

我正在尝试导航到 React Native 中的模式屏幕。我能够导航到屏幕，但我无法传递任何道具。

这就是我的堆栈的设置方式。

const MessagesStack = createStackNavigator(); 

function MainMessagesStackScreen() {   
return (
    <MessagesStack.Navigator>
      <MessagesStack.Screen name="Messages" component={MessagesView} options={{ headerShown: false }} />
    </MessagesStack.Navigator>   ) }

const RootMessagesStack = createStackNavigator();

function RootMessagesStackScreen() {   
return (
    <RootMessagesStack.Navigator mode="modal">
      <RootMessagesStack.Screen 
        name="MainMessages"
        component={MainMessagesStackScreen}
        options={{ headerShown: false}}
      />
      <RootMessagesStack.Screen 
        name="FullPageVideoScreen"
        component={FullPageVideoScreen}
        options={{ headerShown: false}}
      />
    </RootMessagesStack.Navigator>   ) }

在 MessagesView 组件中，点击一个按钮会导致以下功能：

  const goToVideo = (muxPlaybackId) => {
    console.log(muxPlaybackId);
    props.navigation.navigate(FullPageVideoScreen, {muxPlaybackId: muxPlaybackId}); 
  }

然后我可以转到 FullPageVideoScreen 组件。所有代码都能完美运行。但是，没有传递任何参数。

这是 console.log(props) 的输出。

Object {
  "navigation": Object {
    "addListener": [Function addListener],
    "canGoBack": [Function canGoBack],
    "dangerouslyGetParent": [Function dangerouslyGetParent],
    "dangerouslyGetState": [Function anonymous],
    "dispatch": [Function dispatch],
    "goBack": [Function anonymous],
    "isFocused": [Function isFocused],
    "jumpTo": [Function anonymous],
    "navigate": [Function anonymous],
    "pop": [Function anonymous],
    "popToTop": [Function anonymous],
    "push": [Function anonymous],
    "removeListener": [Function removeListener],
    "replace": [Function anonymous],
    "reset": [Function anonymous],
    "setOptions": [Function setOptions],
    "setParams": [Function anonymous],
  },
  "route": Object {
    "key": "FullPageVideoScreen-WmIBW-KYGYNBeOMq9kXZS",
    "name": "FullPageVideoScreen",
    "params": undefined,
  },
}

我非常想将 muxPlaybackId 值作为道具传递。但是，现在，我变得不确定。大家有什么建议吗？

Answer 1

为避免navigate 函数混乱，您可以尝试这种方法。

const navObject = muxPlaybackId => {
      let details = {
      id: muxPlaybackId
    };
    return details;
 }

 const goToVideo = (muxPlaybackId) => {
    props.navigation.navigate({FullPageVideoScreen,navObject(muxPlaybackId)}); 
  }

在您的FullPageVideoScreen 组件中，您可以像这样访问和设置道具。

const [id, setId] = useState('')

useEffect(()=>{
setId(props.route.params.id)
},[])