在React本机页面之间传递数据

Question

我是新来的反应原生,我坚持跟随.

我正在使用下面的代码执行导航(当点击警报视图按钮时).

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

如何将数据传递到React本机中的另一个页面？我可以声明参数全局并只分配给它吗？

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

Answer 1

在页面之间传递数据react-navigation非常简单。在此处的文档中对此进行了明确说明

为了完整起见，我们创建一个小应用程序，使我们能够从一个屏幕导航到另一个屏幕之间传递值。在此示例中，我们将仅传递字符串，但可以传递数字，对象和数组。

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通过执行以下操作来捕获它，in中的第一个值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为如下所示。首先，我们在状态中设置一个初始值。然后，我们创建一个将更新状态的函数。然后，我们将该函数作为参数传递。我们将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'
  }
});

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

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。我们可以将它作为道具传递给我们的组件。只要我们在组件中使用它，就应该能够使用组件自己的功能进行导航。

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

零食

• 这是通过参数的小吃。
• 这是用于传递参数并捕获生命周期事件的小吃。
• 这是将导航传递到组件的小吃

Answer 2

1)在主屏幕上: -

初始化: -

constructor(props) {
    super(props);
    this.navigate = this.props.navigation.navigate; }

发送:-

this.navigate("DetailScreen", {
            name: "Detail Screen",
            about:"This is Details Screen Page"
          });

2)在细节屏幕上: -

初始化: -

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

回收数据: -

console.log(this.params.name);
console.log(this.params.about);

Answer 3

const {navigate} = this.props.navigation;\n\n\xe2\x80\xa6\n.\n.\n { text: 'Done', onPress:() => {\n              navigate('homeScreen',...params);}\n

\n\n

你可以得到这些参数像

\n\n

const {params} = this.props.navigation.state\n

\n