我很想做出反应本地人，而且我一直坚持跟随。
我正在使用下面的代码执行导航（点击警报视图按钮时）。
const {navigation} = this.props.navigation;
…
.
.
{ text: 'Done', onPress:() => {
navigate.push(HomeScreen);}
如何将数据传递到React native中的另一个页面？我可以声明参数全局并只分配给它吗？
执行此操作的正确方法是什么？我将如何处理它？</ p>
答案 0 :(得分：6)
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);
答案 1 :(得分：6)
在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的{{1}}。 MainNavigation.js用两个屏幕MainNavigation.js和StackNavigator设置了Screen1.js。 Screen2.js已设置为我们Screen1的初始屏幕。
我们可以通过使用
从StackNavigator导航到Screen1
Screen2，我们可以使用{p>从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>
)
}
}
中的代码变为：
Screen2export 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，该函数将更新{{ 1}}中包含您要发送的值
因此，我们可以更新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函数，并传入要发送回的文本。
getParamreceivedValue 有可能不使用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中，我们可以完成以下操作：
getParamScreen2至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>
)
}
}
在以上示例中，我们在屏幕之间传递了值。有时我们在屏幕上有一个组件，我们可能想从中导航。只要在作为导航器一部分的屏幕中使用组件，我们就可以做到。
如果我们从初始模板开始并构造两个按钮。一个将是功能组件，另一个将是React组件。
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>
)
}
}
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中的通知，因为它包含在StackNavigator中，它将可以访问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答案 2 :(得分：3)
const {navigate} = this.props.navigation;
…
.
.
{ text: 'Done', onPress:() => {
navigate('homeScreen',...params);}
你可以获得像
这样的参数const {params} = this.props.navigation.state
答案 3 :(得分：3)
您可以像下面这样通过react-navigation轻松地发送和接收参数
发送参数：
{
text: 'Done',
onPress: () => {
this.props.navigation.navigate(
HomeScreen,
{param1: 'value1', param2: 'value2'}
);
}
}
HomeScreen中获取参数：
const { navigation } = this.props;
var param1 = navigation.getParam('param1', 'NO-VALUE');
var param2 = navigation.getParam('param2', 'NO-VALUE');
'NO-VALUE'是默认值，如果没有所需的参数
答案 4 :(得分：3)
我假设您正在使用反应导航。因此，在反应导航中，我们可以分两部分传递数据：
将参数作为第二个参数放置到对象中，以将其传递给路线，该参数是navigation.navigate函数：
this.props.navigation.navigate('RouteName', { /* params go here */ })
阅读屏幕组件中的参数：
this.props.navigation.getParam(paramName, someDefaultValue)
警告按钮
<Button
title="Alert View"
onPress={() => {
this.props.navigation.navigate('alerts', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
屏幕：
const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value')
答案 5 :(得分：1)
HomeScreen.js
this.props.navigation.navigate('Screen2',{ user_name: 'aaa',room_id:'100' });
Screen2.js
const params = this.props.route.params;
user_name = params.user_name;
room_id = params.room_id