利用TabBarIOS+ NavigatorIOS搭建简单的APP框架,先看效果图：
ww.gif
注意的点：
1，首先要知道React-Native组件的生命周期，就是类似iOS中的viewWillAppear，viewDidload，以及viewWillDisappeard方法的执行顺序,可以看看下面的文章
http://www.tuicool.com/articles/nu6zInB
2, React-Native的组件化，其实这个类似iOS中对控件的封装
ED98516F-5812-4449-AFEA-000C8B2BBE74.png
index.ios.js的中代码非常简单，所有框架的搭建全部封装到main.js中了，相对应的首页，活动，分类，购物车，我，中的页面搭建以及逻辑则移到对应的js文件中,这样逻辑就很清楚了。
首先来看mian.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS,
NavigatorIOS} from 'react-native';
var HomeView = require('../Component/home');
var ActivityView = require('../Component/activity');
var CategoryView = require('../Component/category');
var CartView = require('../Component/cart');
var MineView = require('../Component/mine');
var MainView = React.createClass({
//设置初始值
getInitialState(){
return{
//默认选中的tabbaritem
selectedTabItem:'home'
} },
render(){
return(
<TabBarIOS
barTintColor='#f9f9f9' //背景色
translucent={true} //半透明
tintColor='red' //前景色 >
<TabBarIOS.Item
renderAsOriginal
title="首页" //标题
icon={{uri:'首页',scale:2}} //图标
selectedIcon={{uri:'首页-选中',scale:2}} //选中图标
selected = {this.state.selectedTabItem == 'home'}
onPress = {()=>{this.setState({selectedTabItem:'home'});}}//点击事件
>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
component: HomeView, //设置根视图
title:'首页' }}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
renderAsOriginal
title="活动"
icon={{uri:'活动',scale:2}}
selectedIcon={{uri:'活动-选中',scale:2}}
selected = {this.state.selectedTabItem == 'activity'}
onPress={()=>{this.setState({selectedTabItem:'activity'})}}
>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
component: ActivityView,
title:'活动' }}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
renderAsOriginal
title = "分类"
icon = {{uri:'分类',scale:2}}
selectedIcon={{uri:'分类-选中',scale:2}}
selected = {this.state.selectedTabItem == 'category'}
onPress={()=>{this.setState({selectedTabItem:'category'})}}
>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
component: CategoryView,
title:'分类' }}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
renderAsOriginal
title = "购物车"
icon = {{uri:'购物车',scale:2}}
selectedIcon={{uri:'购物车-选中',scale:2}}
selected = {this.state.selectedTabItem == 'cart'}
onPress={()=>{this.setState({selectedTabItem:'cart'})}}
>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
component: CartView,
title:'购物车' }}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
renderAsOriginal
title = "我"
icon = {{uri:'我',scale:2}}
selectedIcon={{uri:'我-选中',scale:2}}
selected = {this.state.selectedTabItem == 'mine'}
onPress={()=>{this.setState({selectedTabItem:'mine'})}}
>
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
component: MineView,
title:'我' }}
/>
</TabBarIOS.Item>
</TabBarIOS>
)
}})
module.exports = MainView;
将所有tabbar和navbar界面封装起来，然后在index.ios .js中调用
//index.ios .js中首先导入MainView
var MainView = require('./Component/main');
class TabBarDemo extends Component{
render(){
return(
//直接调用
<MainView/>
);
}}
AppRegistry.registerComponent('TabBarDemo', () => TabBarDemo);
//home.js中的跳转代码
var HomeNext = require('../Component/home-next');
var HomeView = React.createClass({
render(){
return(
<View style={styles.container}>
<TouchableOpacity
activeOpacity={0.5}
onPress={this.clickToNext}>
<Text style={{
fontSize:30,
backgroundColor: 'red'}}>
home</Text>
</TouchableOpacity>
</View> ) },
clickToNext(){
this.props.navigator.push({
title:'首页-next',
component:HomeNext
})
}
});
网友评论