在React本机页面之间传递数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在React本机页面之间传递数据相关的知识，希望对你有一定的参考价值。
我是新来的反应原生，我坚持跟随。
我正在使用下面的代码执行导航（当点击警报视图按钮时）。
const navigation = this.props.navigation;
…
.
.
text: 'Done', onPress:() =>
navigate.push(HomeScreen);
如何将数据传递到React本机中的另一个页面？我可以声明参数全局并只分配给它吗？
执行此操作的正确方法是什么？我将如何进行此操作？
在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 and 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的初始屏幕。
Navigating between screens
我们可以通过使用从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之间导航
Sending values from Screen1 to 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>
)
Sending values from Screen2 back to 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>
);
Alternatives to using getParam
可以不使用getParam方法而是直接访问值。如果我们这样做，我们将无法设置默认值。但是可以做到。
在Screen2，我们可以做到以下几点：
const text = this.props.navigation.state.params.text;
const receivedValue = this.props.navigation.state.params.receivedValue;
Capturing values in lifecycle events (Screen1 to 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.tex以上是关于在React本机页面之间传递数据的主要内容，如果未能解决你的问题，请参考以下文章