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

Question

我使用反应导航生命周期方法onWillFocus从屏幕A导航到B与对象参数，我需要导航到屏幕和onWillFocus fire以将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。

Passing the value

在Screen1.js中，我们需要传递我们想要发送给Screen2.js的值，我们通过以下方式执行此操作：

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

路径是我们导航到的屏幕的字符串名称，params是包含key/value对的对象。所以我们将传递一个字符串，但任何东西都可以传递。

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

Capturing the 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 prop使用我们刚刚创建的willFocusAction函数。

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

The complete code

这是完整的代码和附带的小吃，显示它工作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',
  }
});