Как передать реквизиты модалу в реагирующей навигации? Неопределенные параметры

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}); 
  }

Затем я могу go к компоненту 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)
},[])