Передача параметров в React Navigation 5

Я пытаюсь передать несколько параметров между навигатором вкладок. Ниже представлена ​​структура моей программы. полужирным шрифтом выделены маршруты.

Приложение (навигатор вкладок): {Главное (стек) и Фильтр (экран)}

Main (Stack Navigator): {Home (экран) и MediaDetails (экран)}

У меня есть кнопка на экране, связанная с фильтром, который имеет функцию onPress (). Я передаю несколько параметров (но давайте рассмотрим параметр to только ради этого вопроса).

this.props.navigation.navigate('Home', {
    to: this.state.to,
}

Теперь на экране, связанном с Домой, я читаю параметр внутри состояния следующим образом:

state = {
    to: this.props.route.params.to
}

Внутри App.js я установил начальное значение на как "2020" следующим образом:

<Stack.Screen 
    name="Home" 
    component={HomeScreen}                 
    initialParams={{
       to: '2020'
    }}
/>

Начальное значение действительно установлено на 2020. Я нажимаю кнопку. Допустим, я устанавливаю на на 1900. Непосредственно перед выполнением this.props.navigation.navigate я console.log (this.state.to) значение, и оно действительно обновляется до 1900. Однако, когда экран изменится на Дом, значение вернется к 2020 (наблюдается через console.log).

Может ли кто-нибудь указать причину этого жуткого поведения? Я много часов безуспешно пытался отладить это. React Navigation 5 тоже довольно новая, поэтому ничего похожего в сети найти не удалось. Любая помощь будет оценена. Спасибо, что дочитали до конца.

Изменить: проблема решена, и весь код удален!


react-native react-navigation react-navigation-bottom-tab react-navigation-v5 react-navigation-stack
person Ali    schedule 13.02.2020    source источник
comment
Вы можете разместить полный код?   -  person satya164    schedule 13.02.2020
comment
Спасибо за проявленный интерес. Я включил полный код сейчас.   -  person Ali    schedule 14.02.2020
comment
Используйте отладчик вместо console.log stackoverflow.com/questions/11284663/   -  person Siraj Alam    schedule 18.02.2020
comment
Пробовал это, а также рендеринг. Не работает!   -  person Ali    schedule 19.02.2020

Ответы (4)


arrow_upward
3
arrow_downward

/ * 1. Перейдите к маршруту Details с помощью params * /

onPress={() => {
      navigation.navigate('Details', {
        itemId: 86,
        otherParam: 'anything you want here',
      });
    }}

/ * 2. Получить параметр * /

const DetailsScreen = ({ route, navigation }) => {
   const { itemId } = route.params;
   const { otherParam } = route.params;
   return (
    <View></View>
    );
};

для получения дополнительной информации: https://reactnavigation.org/docs/params/

person Bilal Ahmad    schedule 26.06.2020
comment
если это класс Component, как получить параметр - person pavan kvch; 18.10.2020

arrow_upward
2
arrow_downward

Я решил эту проблему, обновив состояние в shouldComponentUpdate ().

Эта ошибка возникла из-за того, что состояние не обновлялось, поскольку экран оставался смонтированным.

Это стало возможным благодаря ravirajn22 на GitHub, который объяснил мне причину этой ошибки и возможное решение.

Ссылка на ответ: https://github.com/react-navigation/react-navigation/issues/6863

person Ali    schedule 19.02.2020
comment
Вы можете опубликовать этот ответ или хотя бы ссылку на него? - person Variag; 10.04.2020
comment
Я разместил ссылку сейчас. Спасибо! - person Ali; 10.04.2020

arrow_upward
1
arrow_downward

Как указано Здесь сделать это можно так:

navigation.navigate('otherStackName', {
  screen: 'destinationScreenName',
  params: { user: 'jane' },
});
person Mr.Ghamkhar    schedule 19.10.2020

arrow_upward
0
arrow_downward

В функциональном компоненте напишите простую логику, например: -

  1. В родительском компоненте
<TouchableOpacity onPress={()=>navigation.navigate('childRoute', {data_Pass_to_Child: "Hello I am going to child component"})}>
  1. В дочернем компоненте
const Chat = ({route}) => { 
    console.log(route.params.data_Pass_to_Child);
    return(whatever based on your UI)
}

Примечание. Замените childRoute на имя вашего маршрута, а также замените данные {data_Pass_to_Child: "Hello I am going to child component"} любыми данными, которые вы хотите передать.

person Santosh Kumar    schedule 22.04.2021