如何在 React Native 中的屏幕之间传递值？

React Native 是一种用于开发移动应用程序的框架。在开发移动应用程序时，经常需要在屏幕之间共享数据。本文将介绍一些在 React Native 中传递值的方法。

1. 使用 react-navigation

react-navigation 是一个 React Native 库，用于创建和管理应用程序的屏幕导航。它允许您在屏幕之间传递参数和数据。以下是在两个屏幕之间传递值的示例：

1.1 在屏幕 A 中设置参数

this.props.navigation.navigate('ScreenB', { data: 'Hello from Screen A!' });

1.2 在屏幕 B 中获取参数

const { data } = this.props.route.params;
console.log(data); // output: "Hello from Screen A!"

2. 使用 Redux

Redux 是一个状态管理库，它允许您将应用程序的状态集中管理。通过在 Redux 存储中设置和获取数据，您可以在应用程序的任何部分共享数据。以下是在两个屏幕之间传递值的示例：

2.1 在屏幕 A 中设置值

import { connect } from 'react-redux';
import { setData } from './actions';

class ScreenA extends React.Component {
  onPressButton() {
    this.props.setData('Hello from Screen A!');
  }

  render() {
    return (
      <Button title="Press Me" onPress={() => this.onPressButton()} />
    );
  }
}

const mapDispatchToProps = {
  setData,
};

export default connect(null, mapDispatchToProps)(ScreenA);

2.2 在屏幕 B 中获取值

import { connect } from 'react-redux';

class ScreenB extends React.Component {
  render() {
    return (
      <Text>{this.props.data}</Text>
    );
  }
}

const mapStateToProps = (state) => ({
  data: state.data,
});

export default connect(mapStateToProps)(ScreenB);

总结

本文介绍了两种在 React Native 中传递值的方法：使用 react-navigation 和使用 Redux。这两种方法都可以让您在屏幕之间共享数据和参数。具体使用哪种方法取决于应用程序的具体需求。这些方法也可以组合使用。