如何在react导航中将道具传递给modal?未定义的参数

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