欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ReactNative頁(yè)面跳轉(zhuǎn)實(shí)例代碼

 更新時(shí)間:2016年09月27日 15:15:47   作者:嘆世殘者——華帥  
這篇文章主要介紹了ReactNative頁(yè)面跳轉(zhuǎn)的代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

效果圖如下所示:

進(jìn)入工作目錄,運(yùn)行

react-native init NavigatorProject

創(chuàng)建項(xiàng)目NavigatorProject

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
Navigator
} from 'react-native'; 
class navigatorProject extends Component{
render(){
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;
return(
<Navigator
initialRoute = {{name: defaultName, component: defaultComponent}}  //初始化導(dǎo)航器Navigator,指定默認(rèn)的頁(yè)面
configureScene = {
(route) => {
return Navigator.SceneConfigs.FloatFromRight;  //配置場(chǎng)景動(dòng)畫(huà),頁(yè)面之間跳轉(zhuǎn)時(shí)候的動(dòng)畫(huà)
}
}
renderScene = {
(route, navigator) =>{
let Component = route.component;
return <Component{...route.params} navigator = {navigator} />  //渲染場(chǎng)景
}
}
/>
);
} 
} 
//第一個(gè)頁(yè)面
class FirstPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.push({  //navigator.push 傳入name和你想要跳的組件頁(yè)面
name: "SecondPageComponent",
component: SecondPageComponent
});
} 
}
render(){
return(
<View style = {styles.container}>
<Text>我是第一個(gè)頁(yè)面</Text>
<TouchableHighlight
underlayColor = "rgb(180,135,250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>點(diǎn)擊進(jìn)入第二個(gè)頁(yè)面</Text>
</TouchableHighlight>
</View>
);
}
} 
//第二個(gè)頁(yè)面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.pop();  //navigator.pop 使用當(dāng)前頁(yè)面出棧, 顯示上一個(gè)棧內(nèi)頁(yè)面.
}
}
render(){
return(
<View style = {styles.container}>
<Text>我是第二個(gè)頁(yè)面</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>點(diǎn)擊返回第一個(gè)頁(yè)面</Text>
</TouchableHighlight>
</View>
);
}
} 
const styles = StyleSheet.create({
 container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#FFFFFF',
 },
});
AppRegistry.registerComponent('navigatorProject', () => navigatorProject);

以上所述是小編給大家介紹的ReactNative頁(yè)面跳轉(zhuǎn)實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論