react-native - 在 React Native 中的页面之间传递数据

Question

我是 native react 的新手，我坚持跟随。

我使用下面的代码执行导航(单击警报 View 按钮时)。

const {navigation} = this.props.navigation;
…
.
.
 { text: 'Done', onPress:() => {
              navigate.push(HomeScreen);}

如何将数据传递到 React Native 中的另一个页面？我可以将参数声明为 global 并分配给它吗？

执行此操作的正确方法是什么，我将如何处理？

Answer 1

Note

This answer was written for react-navigation: "3.3.0". As there are newer versions available, which could bring changes, you should make sure that you check with the actual documentation.

在 react-navigation 中的页面之间传递数据是相当直接的。文档 here 中有清楚的解释

为了完整起见，让我们创建一个小应用程序，允许我们从一个屏幕导航到另一个屏幕之间传递值。在这个例子中，我们将只传递字符串，但也可以传递数字、对象和数组。
App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  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和 Screen2.js

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

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      </View>
    )
  }
}

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

这里我们有 4 个文件。 App.js我们将导入 MainNavigation.js . MainNavigation.js设置 StackNavigator带两个屏幕， Screen1.js和 Screen2.js . Screen1已设置为我们 StackNavigator 的初始屏幕.

在屏幕之间导航

我们可以从 Screen1 导航至 Screen2通过使用

this.props.navigation.navigate('Screen2');

我们可以回到 Screen1来自 Screen2通过使用

this.props.navigation.goBack();

所以代码在 Screen1变成

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go to screen 2'} onPress={() => this.props.navigation.navigate('Screen2')} />
      </View>
    )
  }
}

和代码在 Screen2变成:

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go back'} onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

现在我们可以在 Screen1 之间导航和 Screen2
从 Screen1 发送值至 Screen2
在 Screen1 之间发送一个值和 Screen2 ，涉及两个步骤。首先我们必须发送它，其次我们必须捕获它。

我们可以通过将它作为第二个参数传递来发送一个值。注意文本值是如何包含在对象中的。

this.props.navigation.navigate('Screen2', {text: 'Hello from Screen 1' });

我们可以在 Screen2 中捕获它通过执行以下操作， getParams 中的第一个值是 key第二个值是默认值。

const text = this.props.navigation.getParams('text','nothing sent');

所以 Screen1现在变成

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button 
         title={'Go to screen 2'} 
         onPress={() => this.props.navigation.navigate('Screen2',  { 
           text: 'Hello from screen 1' 
         })} />
      </View>
    )
  }
}

和代码在 Screen2变成:

export default class Screen extends React.Component {
  render() {
    const text =  this.props.navigation.getParam('text', 'nothing sent')
    return (
      <View style={styles.container}>
        <Text>{text}</Text>
        <Button 
         title={'Go back'} 
         onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

从 Screen2 发送值返回 Screen1
我发现从 Screen2 发送值的最简单方法至 Screen1是传递一个函数给 Screen2来自 Screen1这将更新 Screen1 中的状态使用您要发送的值

所以我们可以更新 Screen1看起来像这样。首先我们在 state 中设置一个初始值。然后我们创建一个函数来更新状态。然后我们将该函数作为参数传递。我们将显示来自 Screen2 的捕获值在 Text成分。

export default class Screen1 extends React.Component {

  state = {
    value: ''
  }

  receivedValue = (value) => {
    this.setState({value})
  }

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

请注意，我们正在传递函数 receivedValue与我们通过 text 的方式相同早些时候。

现在我们必须捕获 Screen2 中的值我们以与以前非常相似的方式做到这一点。我们使用 getParam获取值，记住设置我们的默认值。然后当我们按下我们的 返回 按钮，我们更新它以调用 receivedValue首先是函数，传入我们要发回的文本。

export default class Screen2 extends React.Component {

  render () {
    const text =  this.props.navigation.getParam('text', 'nothing sent');
    const receivedValue = this.props.navigation.getParam('receivedValue', () => {});
    return (
      <View style={styles.container}>
        <Button 
          title={'Go back'} 
          onPress={() => {
            receivedValue('Hello from screen 2')
            this.props.navigation.goBack()
          }} />
          <Text>{text}</Text>
      </View>
    );
  }
}

使用的替代方法 getParam
可以不使用 getParam方法，而是直接访问值。如果我们这样做，我们将无法设置默认值。然而这是可以做到的。

在 Screen2我们可以做到以下几点:

const text = this.props.navigation.state.params.text;
const receivedValue = this.props.navigation.state.params.receivedValue;

捕获生命周期事件中的值( Screen1 到 Screen2 )
react-navigation允许您使用生命周期事件捕获值。有几种方法可以做到这一点。我们可以使用 NavigationEvents或者我们可以使用在 componentDidMount 中设置的监听器

以下是如何使用 NavigationEvents 进行设置

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


export default class Screen2 extends React.Component {

    state = {
      text: 'nothing passed'
    }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }


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

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

以下是如何使用 componentDidMount 中的监听器进行操作

export default class Screen2 extends React.Component {

  componentDidMount () {
    // we add the listener here
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocusAction);
  }

  componentWillUmount () {
    // we remove the listener here
    this.willFocusSubscription.remove()
  }

  state = {
    text: 'nothing passed'
  }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 2</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

通过组件传递导航

在上面的例子中，我们已经将值从一个屏幕传递到另一个屏幕。有时我们在屏幕上有一个组件，我们可能想从中导航。只要组件在作为导航器一部分的屏幕中使用，我们就可以做到。

如果我们从我们的初始模板开始并构造两个按钮。一个是功能组件，另一个是 React 组件。
MyButton.js

// this is a functional component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export const MyButton = ({navigation, value, title}) => {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  }
});

MyOtherButton.js

// this is a React component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export default class MyOtherButton extends React.Component {

  render() {
    const { navigation, value, title } = this.props; 
    return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellow'
  }
});

无论组件的类型如何，请注意导航是一个 Prop 。我们必须将导航传递给组件，否则它将无法工作。
Screen1.js

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

export default class Screen1 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 1</Text>
        <MyButton 
          title={'Press my button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyButton'}
        />
        <MyOtherButton 
          title={'Press my other button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyOtherButton'}
        />
      </View>
    )
  }
}

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

通知于 Screen1.js因为它包含在 StackNavigator 中，所以它可以访问 this.props.navigation .我们可以将它作为 Prop 传递给我们的组件。只要我们在组件中使用它，那么我们就应该能够使用组件自己的功能进行导航。

<MyButton 
  title={'Press my button'} 
  navigation={this.props.navigation} // pass the navigation here
  value={'this is a string passed using MyButton'} 
/>

零食

这里有小吃for passing params .

这里有小吃for passing params and capturing in lifecycle events .

这里有小吃passing navigation to components