ReactNative官网例子练习（五）——页面跳转传参

  上一篇文章练习了Rn中使用Navigator跳转页面。我们一个完成的应用中一般不仅仅是跳转页面，经常还会传一些参数到下一个界面。Rn中怎么实现传参呢？ 

例子代码：

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
Navigator
} from 'react-native';

class RnWidget extends Component {

render() {
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;

return (
<Navigator
styles = {styles.container}
initialRoute = {{name: defaultName,component : defaultComponent}}
configureScene = {
(route)=>{
return Navigator.SceneConfigs.FloatFromRight
}
}
renderScene = {(route,navigator)=>{
let Component = route.component;
return <Component{...route.params} navigator={navigator}/>
}}
/>
)
}
}
//第一个界面
class FirstPageComponent extends Component{
constructor(props){
super(props);
this.state={
title :"title哈哈"
}
}
clickJump(){
//因为Navigator <Component {...route.params} navigator={navigator} />传入了navigator 所以这里能取到navigator
const{navigator} = this.props;
let that = this;
if(navigator){
navigator.push({
name : "SecondPageComponent",
component : SecondPageComponent,
params :{
title:this.state.title,
id:123,
getUser:function(user){
that.setState({
user:user
})
}
}
})
}
}
render(){
return(
<View style={styles.container}>
<Text>我是第一个界面</Text>
<TouchableHighlight
underlayColor="rgb(181, 136, 254)"
activeOpacity={0.5}
style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
onPress={this.clickJump.bind(this)}
>
<Text>点击进入第二个界面</Text>
</TouchableHighlight>
<Text>第二个界面返回：{this.state.user}</Text>
</View>
)
}
}

//第二个界面
class SecondPageComponent extends Component{
constructor(props){
super(props);
this.state={
id:null
}
}
clickJump(){
if(this.props.getUser){
this.props.getUser("大海")
}
const{navigator} = this.props;
if(navigator){
//把当前页面pop掉 回到上一个页面
navigator.pop();
}
}

componentDidMount(){
this.setState({
title:this.props.title,
id:this.props.id
})
}
render(){
return(
<View style={styles.container}>
<Text>我是第二个界面</Text>

<TouchableHighlight
underlayColor="rgb(181, 136, 254)"
activeOpacity={0.5}
style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}
onPress={this.clickJump.bind(this)}
>
<Text>点击返回第一个界面</Text>
</TouchableHighlight>

<Text>第一个界面传入：{this.state.title}</Text>
</View>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
},

});
AppRegistry.registerComponent('RnWidget', () => RnWidget);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
第一个页面传入到第二个页面 

首先在第一个界面navigator.push的时候参数里面添加一个params的参数。里面就是我们想要传到下一个界面的数据。比如这里传个title

navigator.push({
name : "SecondPageComponent",
component : SecondPageComponent,
params :{
title:this.state.title,
}
})

1
2
3
4
5
6
7
1
2
3
4
5
6
7

第二个界面在生命周期函数componentDidMount()中给state赋值。componentDidMount是当render()完成的时候调用

componentDidMount(){
this.setState({
title:this.props.title,
})
}

1
2
3
4
5
1
2
3
4
5
第二个页面传回第一个页面 

在第一个页面的push的参数params里面增加一个方法接收下一个页面传过来的参数然后更改当前的state中的值

params :{
title:this.state.title,
id:123,
getUser:function(user){
that.setState({
user:user
})
}
}

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

第二个页面在navigator.pop();之前调用第一个界面传过来的getUser方法。

if(this.props.getUser){
this.props.getUser("大海")
}

1
2
3
1
2
3

效果：