前端之家收集整理的这篇文章主要介绍了
react-native 页面切换的实现,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict';
var React = require('react-native');
var {
AppRegistry,Component,StyleSheet,Text,View,TouchableOpacity,ListView,NavigatorIOS,TouchableHighlight,} = React;
var dazhongdemo=React.createClass({
OnRightButtonPress:function(){
this.refs.nav.push({
title:'设置',component:ForRightScene //点击导航右侧的按钮跳转到的页面 })
},render:function() {
return (
<NavigatorIOS ref="nav" style={styles.container}
initialRoute={{
component: HomeScene,//在NavigatorIOS中显示的第一个组件
title: '主页',//组件的标题
rightButtonTitle:'下一页',//导航工具栏右侧按钮显示的文本
onRightButtonPress:this.OnRightButtonPress//当点金右侧按钮时执行的函数
}}
/>
);
},});
//实现第一个页面HomeScene
var HomeScene=React.createClass({
onPress:function(){
this.props.navigator.push({
title:'个人中心',component:ForTouchScene });
},render:function(){
return (
<View style={[styles.scene,{backgroundColor:'#DAF6FF'}]}>
<TouchableHighlight onPress={this.onPress}>
<Text>点击进入个人中心</Text>
</TouchableHighlight>
</View>
);
},});
//实现设置页面 var ForRightScene=React.createClass({
render:function(){
return(
<View style={[styles.scene,{backgroundColor:'#FFF1E8'}]}>
<Text>设置页面</Text>
</View>
)
},});
//实现个人中心页面 var ForTouchScene=React.createClass({
render:function(){
return(
<View style={[styles.scene,{backgroundColor:'#ECF6E8'}]}>
<Text>个人中心</Text>
</View>
)
},});
var styles = StyleSheet.create({
container: {
flex: 1,},scene: {
padding: 10,paddingTop:74,flex: 1,});
AppRegistry.registerComponent('dazhongdemo',() => dazhongdemo);