Передача параметров навигации в состояние экрана второго компонента реагирует на навигацию

Question

Я перемещаюсь с экрана A на B с параметрами объекта, используя метод жизненного цикла реагирования навигации onWillFocus, и мне нужно после перехода к экрану и onWillFocus запустить, чтобы установить payload.state.params в состояние компонента.

Я пробовал, но возвращение состояния не определено, как я могу использовать жизненный цикл для извлечения отправленных параметров и использовать эти сохраненные параметры для извлечения данных из API в том же жизненном цикле компонента.и сохраните его в том состоянии, чтобы использовать его на этом новом экране.

моя функция рендеринга:

render(){
    <navigationEvents
        onWillFocus={payload => this.getSessionData(payload)}
    />
}

функция, которую она вызывает:

getSessionData = (session_data) => {
    const session = session_data.state.params;
    this.setState({
        session_data: {...this.state.session_data, session}
    });
    console.log(this.state.session_data);
}

Answer 1

Чтобы передать значение через react-navigation и зафиксировать его в навигации, необходимо убедиться, что вы правильно передали значение.

Вот простой пример, показывающий, как получить значение, используя NavigationEvents

. Он состоит из четырех файлов.App.js, MainNavigation.js, Screen1.js и Screen2.js.

Передав значение

В Screen1.js нам нужно передать значение, которое мы хотим отправить, в Screen2.js, мы делаем это следующим образом:

this.props.navigation.navigate(route, params)

Маршрут - это строковое имя экрана, к которому мы перемещаемся, а params - это объект, содержащий пару key/value.Таким образом, мы передадим строку, но все может быть передано.

this.props.navigation.navigate('Screen2', { value: 'this is the passed value'})

Захват значения

Поскольку мы используем NavigationEvents, нам нужно убедиться, что мы импортируем их наверхняя часть Screen2.js, поэтому у нас должно быть:

import { NavigationEvents } from 'react-navigation';

Поскольку мы собираемся захватить его в состоянии, установите начальное значение и давайте создадим функцию для обработки события willFocus.

state = {
  value: 'nothing passed'
}

willFocusAction = (payload) => {
  let params = payload.state.params;
  let value = params.value; // this uses the key that we passed in Screen1
  this.setState({value});
}

Затем в вашем рендере мы используем компонент NavigationEvents, который мы только что импортировали, чтобы убедиться, что onWillFocus опора использует только что созданную нами функцию willFocusAction.

<View style={styles.container}>
  <NavigationEvents
    onWillFocus={this.willFocusAction}
  />
  <Text>Screen 2</Text>
  <Text>{this.state.value}</Text>
</View>

Полныйкод

Вот полный код и сопровождающая закуска, показывающая его работоспособность https://snack.expo.io/@andypandy/catching-values-with-navigation-listeners

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

Screen1.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Screen1 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 1</Text>
        <Button 
          title={'Go to screen 2'} 
          onPress={() => this.props.navigation.navigate('Screen2', { value: 'this is the passed value'})} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Screen2.js

import React, {Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NavigationEvents } from 'react-navigation';


export default class Screen2 extends React.Component {

  state = {
    value: 'nothing passed'
  }


willFocusAction = (payload) => {
  let params = payload.state.params;
  let value = params.value;
  this.setState({value});
  console.log('willFocus Screen 2', new Date().getTime());
}


  render() {
    return (
      <View style={styles.container}>
        <NavigationEvents
        onWillFocus={this.willFocusAction}

        />
        <Text>Screen 2</Text>
        <Text>{this.state.value}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});