Блог

Я пытаюсь передать параметры на новый экран и реализовал это, как указано здесь.

У меня есть следующая TouchableOpacity кнопка.

 <TouchableOpacity
  onPress={() => {
    this.props.navigation.navigate('SomeScreen', {
      title: 'Title',
      subTitle: 'Subtitle',
    });
  }}
>
  

На другой странице (давайте назовем ее Somescreen) у меня есть следующее:

 render() {
  const { navigation } = this.props;
  const title = navigation.getParam('title');
}
  

Но title выше не определено:

 { params: undefined, routeName: "Somescreen", key: "id-xx" }
  

Мой корневой стек:

 const RootStack = createStackNavigator({
  SomescreenA: { screen: SomescreenA },
  SomescreenB: { screen: SomescreenB },
}, { headerMode: 'none' });
  

Почему мои параметры не определены на новом экране?

Если вы столкнулись с ситуацией, когда ваш целевой экран получает undefined параметры, вероятно, у вас есть вложенный стек навигации.

Здесь вы должны передать параметры методу navigate следующим образом:

 navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});
  

Для получения дополнительной информации прочитайте эту страницу в официальных документах:

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

В моем конкретном случае я вызывал вложенный навигатор, поэтому мне нужно было управлять тем, как отправлять эти параметры на их конкретный экран, поэтому я сделал это:

Отправляйте параметры таким образом … обычным способом:

     navigation.navigate(
        'OrderNavigator',
        {itemSelected},
    );
  

Затем из стека navigator я сделал это:

 const OrderNavigator = ({route: {params}}) => {
return (
    <Stack.Navigator initialRouteName="Order">
        <Stack.Screen name="Order" component={Order} options={{headerShown: false}} initialParams={params} />
    </Stack.Navigator>
);
  

};

И это все. Затем на экране я получил их следующим образом:

 const Order = ({route}) => {
  const {itemSelected} = route.params;
  const {first_name, last_name} = itemSelected;
  return (...)
}
  

Я, к сожалению, сталкивался со случаями, когда navigate(route, params, ...) не передавал params объект, как это сделали вы.

В качестве обходного пути я использую другой вариант, navigate({routeName, params, action, key}) который вы можете найти здесь. Это всегда работает.

Принятое решение для ответа у меня не сработало, так что, очевидно, если вы используете children для рендеринга своего компонента (в настройках экрана) и передаете route в качестве реквизита, это сработает

если вы используете react navigation v6 ^ используйте useRoute перехват для доступа к объекту params

const route = useRoute();

useRoute это перехват, который предоставляет доступ к объекту route. Это полезно, когда вы не можете передать route prop в компонент напрямую или не хотите передавать его в случае глубоко вложенного дочернего элемента.

ниже приведена реализация этого

 
    import { useNavigation, useRoute } from '@react-navigation/native';
    import { Pressable, Text } from 'react-native';

    function Screen1() {
      const navigation = useNavigation();

      return (
        <Pressable
          onPress={() => {
            navigation.navigate('Screen2', { caption: 'hey' });
          }}
        >
          <Text> Go to Screen 2 </Text>
        </Pressable>
      );
    }

    function Screen2() {
      const route = useRoute();

      return <Text>{route.params.caption}</Text>;
    }