React-native页面跳转传值

首先是index.android.js

我们需要用到Navigator来进行页面的跳转，所有的js文件处于同一目录下面，

在FirstPageComponent页面中我们需要定义好参数：

[javascript] view plain copy
 print?
constructor(props) {  
        super(props);  
        this.state = {};  
    }  

将参数传值给需要传值的页面：

[javascript] view plain copy
 print?
if(navigator) {  
            navigator.push({  
                name: 'SecondPageComponent',  
                component: SecondPageComponent,  
                params:{  
                    user:this.state.user,  
                    pwd:this.state.pwd  
                }  
            })  
        }  

在TextInput控件中对参数进行赋值：

[javascript] view plain copy
 print?
onChangeText={(text) => this.setState({user: text})}  

第二个页面接收的参数就很简单了：

[javascript] view plain copy
 print?
componentDidMount() {  
            //这里获取从FirstPageComponent传递过来的参数: id  
            this.setState({  
                user:this.props.user,  
                pwd:this.props.pwd  
            });  
    }  

第二个页面TextInput控件接收值就这样写：

[javascript] view plain copy
 print?
value={this.state.user }  

具体实现请看如下源码：

[javascript] view plain copy

print?

1. /** 
2.  * Sample React Native App 
3.  * https://github.com/facebook/react-native 
4.  */  
5. 'use strict';  
6. import React, {  
7.   AppRegistry,  
8.   Component,  
9.   View,  
10.   Navigator  
11. } from 'react-native';  
12.   
13. import FirstPageComponent from './FirstPageComponent';  
14.   
15. class ReactNativeDemo extends Component {  
16.   render() {  
17.     var defaultName = 'FirstPageComponent';  
18.     var defaultComponent = FirstPageComponent;  
19.     return (  
20.         <Navigator  
21.             initialRoute={{ name: defaultName, component: defaultComponent }}  
22.             configureScene={(route) => {  
23.             return Navigator.SceneConfigs.HorizontalSwipeJump;  
24.         }}  
25.         renderScene={(route, navigator) => {  
26.             let Component = route.component;  
27.             return <Component {...route.params} navigator={navigator} />  
28.         }}/>  
29.     );  
30.   }  
31. }  
32. AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);  

接下来就是应用启动后的首屏页面

[javascript] view plain copy

print?

1. /** 
2.  * Sample React Native App 
3.  * https://github.com/facebook/react-native 
4.  */  
5. 'use strict';  
6. import React,{  
7.     AppRegistry,  
8.     Component,  
9.     StyleSheet,  
10.     Text,  
11.     Image,  
12.     View,  
13.     TextInput  
14. } from 'react-native';  
15.   
16. import SecondPageComponent from './SecondPageComponent';  
17.   
18. var TouchableButton = require('./module/TouchableButton');  
19.   
20. class FirstPageComponent extends React.Component {  
21.   
22.     constructor(props) {  
23.         super(props);  
24.         this.state = {};  
25.     }  
26.   
27.     _pressButton() {  
28.         const { navigator } = this.props;  
29.         //或者写成 const navigator = this.props.navigator;  
30.         //为什么这里可以取得 props.navigator?请看上文:  
31.         //<Component {...route.params} navigator={navigator} />  
32.         //这里传递了navigator作为props  
33.         if(navigator) {  
34.             navigator.push({  
35.                 name: 'SecondPageComponent',  
36.                 component: SecondPageComponent,  
37.                 params:{  
38.                     user:this.state.user,  
39.                     pwd:this.state.pwd  
40.                 }  
41.             })  
42.         }  
43.     }  
44.   
45.     render() {  
46.         return (  
47.             <View style={{backgroundColor:'#f4f4f4',flex:1}}>  
48.                 <Image  
49.                     style={styles.style_image}  
50.                     source={require('./app_icon.jpg')}/>  
51.                 <TextInput  
52.                     style={styles.style_user_input}  
53.                     placeholder='QQ号/手机号/邮箱'  
54.                     numberOfLines={1}  
55.                     autoFocus={true}  
56.                     underlineColorAndroid={'transparent'}  
57.                     onChangeText={(text) => this.setState({user: text})}  
58.                     textAlignVertical='center'  
59.                     textAlign='center'/>  
60.                 <View style={{height:1,backgroundColor:'#f4f4f4'}}/>  
61.                 <TextInput  
62.                     style={styles.style_pwd_input}  
63.                     placeholder='密码'  
64.                     numberOfLines={1}  
65.                     underlineColorAndroid={'transparent'}  
66.                     onChangeText={(text) => this.setState({pwd: text})}  
67.                     secureTextEntry={true}  
68.                     textAlignVertical='center'  
69.                     textAlign='center'  
70.                 />  
71.   
72.                 <View  style={styles.style_view_commit}>  
73.                     <Text style={{color:'#fff'}}>  
74.                        登录  
75.                     </Text>  
76.                 </View>  
77.   
78.                 <View>  
79.                     <TouchableButton  
80.                         underlayColor='#4169e1'  
81.                         style={styles.style_view_button}  
82.                         onPress={this._pressButton.bind(this)}  
83.                         text='登录有点击效果-跳转页面'>  
84.                     </TouchableButton>  
85.                 </View>  
86.   
87.                 <View style={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}>  
88.                      <Text style={styles.style_view_unlogin}>  
89.                          无法登录?  
90.                     </Text>  
91.                     <Text style={styles.style_view_register}>  
92.                          新用户  
93.                     </Text>  
94.                 </View>  
95.           </View>  
96.         );  
97.     }  
98. }  
99.   
100. const styles = StyleSheet.create({  
101.   style_image:{  
102.     borderRadius:45,  
103.     height:70,  
104.     width:70,  
105.     marginTop:40,  
106.     alignSelf:'center',  
107.   },  
108.   style_user_input:{  
109.       backgroundColor:'#fff',  
110.       marginTop:10,  
111.       height:45,  
112.   },  
113.   style_pwd_input:{  
114.       backgroundColor:'#fff',  
115.       height:45,  
116.   },  
117.   style_view_commit:{  
118.       marginTop:15,  
119.       marginLeft:10,  
120.       marginRight:10,  
121.       backgroundColor:'#63B8FF',  
122.       borderColor:'#5bc0de',  
123.       height:45,  
124.       borderRadius:5,  
125.       justifyContent: 'center',  
126.       alignItems: 'center',  
127.   },  
128.   style_view_button:{  
129.       marginTop:15,  
130.       marginLeft:10,  
131.       marginRight:10,  
132.       backgroundColor:'#63B8FF',  
133.       borderColor:'#5bc0de',  
134.       height:45,  
135.       borderRadius:5,  
136.       justifyContent: 'center',  
137.       alignItems: 'center',  
138.   },  
139.   style_view_unlogin:{  
140.     fontSize:15,  
141.     color:'#63B8FF',  
142.     marginLeft:10,  
143.   },  
144.   style_view_register:{  
145.     fontSize:15,  
146.     color:'#63B8FF',  
147.     marginRight:10,  
148.     alignItems:'flex-end',  
149.     flex:1,  
150.     flexDirection:'row',  
151.     textAlign:'right',  
152.   }  
153. });  
154.   
155. export default FirstPageComponent  

接下来是我们跳转的第二个页面

[javascript] view plain copy

print?

1. import React, {  
2.     AppRegistry,  
3.     Component,  
4.     StyleSheet,  
5.     Text,  
6.     Image,  
7.     View,  
8.     TextInput  
9. } from 'react-native';  
10.   
11. import FirstPageComponent from './FirstPageComponent';  
12.   
13. var TouchableButton = require('./module/TouchableButton');  
14.   
15. class SecondPageComponent extends React.Component {  
16.   
17.     constructor(props) {  
18.         super(props);  
19.         this.state = {  
20.             user:null,  
21.             pwd:null  
22.         };  
23.     }  
24.   
25.     componentDidMount() {  
26.             //这里获取从FirstPageComponent传递过来的参数: id  
27.             this.setState({  
28.                 user:this.props.user,  
29.                 pwd:this.props.pwd  
30.             });  
31.     }  
32.   
33.     _pressButton() {  
34.         const { navigator } = this.props;  
35.         if(navigator) {  
36.             //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent了  
37.             navigator.pop();  
38.         }  
39.     }  
40.   
41.     render() {  
42.         return (  
43.             <View style={{backgroundColor:'#f4f4f4',flex:1}}>  
44.                 <Image  
45.                     style={styles.style_image}  
46.                     source={require('./app_icon.jpg')}/>  
47.                 <TextInput  
48.                     style={styles.style_user_input}  
49.                     placeholder='QQ号/手机号/邮箱'  
50.                     numberOfLines={1}  
51.                     autoFocus={true}  
52.                     underlineColorAndroid={'transparent'}  
53.                     value={this.state.user }  
54.                     textAlignVertical='center'  
55.                     textAlign='center'/>  
56.                 <View style={{height:1,backgroundColor:'#f4f4f4'}}/>  
57.                 <TextInput  
58.                     style={styles.style_pwd_input}  
59.                     placeholder='密码'  
60.                     numberOfLines={1}  
61.                     underlineColorAndroid={'transparent'}  
62.                     value={this.state.pwd }  
63.                     secureTextEntry={true}  
64.                     textAlignVertical='center'  
65.                     textAlign='center'  
66.                 />  
67.   
68.                 <View  style={styles.style_view_commit}>  
69.                     <Text style={{color:'#fff'}}>  
70.                        登录  
71.                     </Text>  
72.                 </View>  
73.   
74.                 <View>  
75.                     <TouchableButton  
76.                         underlayColor='#4169e1'  
77.                         style={styles.style_view_button}  
78.                         onPress={this._pressButton.bind(this)}  
79.                         text='登录有点击效果-跳转页面'>  
80.                     </TouchableButton>  
81.                 </View>  
82.   
83.                 <View style={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}>  
84.                      <Text style={styles.style_view_unlogin}>  
85.                          无法登录?  
86.                     </Text>  
87.                     <Text style={styles.style_view_register}>  
88.                          新用户  
89.                     </Text>  
90.                 </View>  
91.           </View>  
92.         );  
93.     }  
94. }  
95.   
96. const styles = StyleSheet.create({  
97.   style_image:{  
98.     borderRadius:45,  
99.     height:70,  
100.     width:70,  
101.     marginTop:40,  
102.     alignSelf:'center',  
103.   },  
104.   style_user_input:{  
105.       backgroundColor:'#fff',  
106.       marginTop:10,  
107.       height:45,  
108.   },  
109.   style_pwd_input:{  
110.       backgroundColor:'#fff',  
111.       height:45,  
112.   },  
113.   style_view_commit:{  
114.       marginTop:15,  
115.       marginLeft:10,  
116.       marginRight:10,  
117.       backgroundColor:'#63B8FF',  
118.       borderColor:'#5bc0de',  
119.       height:45,  
120.       borderRadius:5,  
121.       justifyContent: 'center',  
122.       alignItems: 'center',  
123.   },  
124.   style_view_button:{  
125.       marginTop:15,  
126.       marginLeft:10,  
127.       marginRight:10,  
128.       backgroundColor:'#63B8FF',  
129.       borderColor:'#5bc0de',  
130.       height:45,  
131.       borderRadius:5,  
132.       justifyContent: 'center',  
133.       alignItems: 'center',  
134.   },  
135.   style_view_unlogin:{  
136.     fontSize:15,  
137.     color:'#63B8FF',  
138.     marginLeft:10,  
139.   },  
140.   style_view_register:{  
141.     fontSize:15,  
142.     color:'#63B8FF',  
143.     marginRight:10,  
144.     alignItems:'flex-end',  
145.     flex:1,  
146.     flexDirection:'row',  
147.     textAlign:'right',  
148.   }  
149. });  
150.   
151. export default SecondPageComponent