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)
},[])

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

1 个答案: