将导航参数传递给第二个屏幕组件状态以响应导航

Question

我正在使用反应导航生命周期方法onWillFocus使用对象的参数从屏幕A导航到B，导航到屏幕后需要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',
  }
});