使用Rreact Native 之Navigator导航器小结
Demo介绍
- 对Navigator的简单使用,在两个界面(准确来说是两个View之间跳转)
OnePage 和 TwoPage 分别新建.js文件.
算了直接上代码.
OnePage.js
/**
* Created by zhiwei_zhu on 17/1/19.
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Dimensions,
TouchableOpacity,
ToastAndroid,
Image,
Navigator,
} from 'react-native';
import TwoPage from './TwoPage'
const W = Dimensions.get('window').width;
const H = Dimensions.get('window').height;
export default class OnePage extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
msg:"我是默认的",
};
}
startActivity(){
const {nav} = this.props;
if(nav){
nav.push({
name:'TwoPage',
component:TwoPage,
params:{
msg:"我从第一页过来的"
}
})
}
}
render() {
return (
<View style={styles.container}>
<Text>第一页</Text>
<TouchableOpacity style={{width: W,height:60,justifyContent:'center',flexDirection:'row'}} onPress={this.startActivity.bind(this)}>
<Text style={{width:W,height: 60,backgroundColor:'red',alignItems:'center',textAlignVertical:'center',textAlign: 'center',}}>{this.props.msg ? this.props.msg : this.state.msg}</Text>
</TouchableOpacity>
</View>
);
}
}
styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
TwoPage.js
/**
* Created by zhiwei_zhu on 17/1/19.
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Dimensions,
TouchableOpacity,
ToastAndroid,
Image,
Navigator,
} from 'react-native';
import OnePage from "./OnePage"
const W = Dimensions.get('window').width;
const H = Dimensions.get('window').height;
export default class TwoPage extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}
startActivity(){
const {nav} = this.props;
if(nav){
nav.push({
name:"OnePage",
component:OnePage,
params:{
msg:"我从第二页过来的"
}
})
}
}
render() {
return (
<View style={styles.container}>
<Text>第二页</Text>
<TouchableOpacity style={{width: W,height:45,justifyContent:'center'}} onPress={this.startActivity.bind(this)}>
<Text style={{textAlign: 'center',backgroundColor:'#0000ff',height:45,textAlignVertical:'center'}}>{this.props.msg}</Text>
</TouchableOpacity>
</View>
);
}
}
styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
上面两个文件没什么好讲的.
index.android.js 文件
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
AsyncStorage,
TextInput,
Dimensions,
TouchableOpacity,
ToastAndroid,
Vibration,
Keyboard,
Alert,
CameraRoll,
ListView,
Image,
ScrollView,
Navigator,
} from 'react-native';
import OnePage from "./pages/OnePage"
const W = Dimensions.get('window').width; //获取屏幕宽度
const H = Dimensions.get('window').height; //获取屏幕高度
export default class PrjeckAsnysState extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}
render() {
return (
<Navigator initialRoute={{name:"OnePage",component:OnePage}}
renderScene={(route,nav)=>{
let Components = route.component;
return <Components {...route.params} nav={nav}/>
}}
>
</Navigator>
);
}
}
styles = StyleSheet.create({
flex_1: {
flex: 1,
},
m5: {
marginLeft: 5,
marginRight: 5,
borderWidth: 1,
borderColor: '#ddd',
},
row: {
flexDirection: 'row',
},
imageGrid: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
},
image: {
width: 100,
height: 100,
margin: 10,
},
imgHeight: {
height: 180,
},
saveImg: {
flex: 1,
height: 30,
textAlign: 'center',
marginTop: 20,
color: '#FFF',
lineHeight: 20,
borderRadius: 5,
marginLeft: 5,
marginRight: 5,
fontWeight: 'bold',
backgroundColor: '#3BC1FF',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('PrjeckAsnysState', () =>PrjeckAsnysState);
其中
render() {
return (
<Navigator initialRoute={{name:"OnePage",component:OnePage}}
renderScene={(route,nav)=>{
let Components = route.component;
return <Components {...route.params} nav={nav}/>
}}
>
</Navigator>
);
}
initialRoute:属性表示默认的显示第一个View或者第一页, name 为可选的,component对应的是 import OnePage from “./pages/OnePage” 导入的名字.
renderScene:通过把导航器传入到下一个页面的,并通过props的方式把要传递的参数传递到下一页.之后在下一个页面直接通过 cons{nav} = this.props 即可,nav就是导航器本身.
传递到下一个页面的的参数即可通过以下方式获取并传参.
startActivity(){
const {nav} = this.props;
if(nav){
nav.push({
name:'TwoPage',
component:TwoPage,
params:{
msg:"我从第一页过来的"
}
})
}
}
params 可以是多个,再下一页获取直接 直接 this.props.msg 就可以获取到数据.