首先来创建4个组件如图所示
接下来我们将我们的主视图MainCless 导入index.ios.js文件中具体实现如下
第三步就是在我们MainClass.中进行操作了,
首先要引入需要的组件
importReact, {Component}from'react';
import{
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS,
NavigatorIOS
}qrom'react-native';
接下来引入我们的外部组件
//引入外部组件
varHome=require('../Class/Home.js')
varFind=require('../Class/Find.js')
varMe=require('../Class/Me.js')
varMassage=require('../Class/Message.js')
第三实现具体操作
varMain= React.createClass({
getInitialState(){
return{
//设置选中标识
selectedItem:'home'
}
},
render() {
return(
{/*首页*/}
icon={require('image!tabbar_home')}
title="首页"
selected={this.state.selectedItem=='home'}
onPress={()=>{this.setState({selectedItem:'home'})}}
>
initialRoute={
{
component:Home,
title:'网易'
}
}
/>
{/*消息*/}
icon={require('image!tabbar_message_center')}
title="消息"
selected={this.state.selectedItem=='message'}
onPress={()=>{this.setState({selectedItem:'message'})}}
>
initialRoute={
{
component:Massage,
title:'消息'
}
}
/>
{/*发现*/}
icon={require('image!tabbar_discover')}
title="发现"
selected={this.state.selectedItem=='find'}
onPress={()=>{this.setState({selectedItem:'find'})}}
>
initialRoute={
{
component:Find,
title:'发现'
}
}
/>
{/*我的*/}
icon={require('image!tabbar_profile')}
title="我的"
selected={this.state.selectedItem=='me'}
onPress={()=>{this.setState({selectedItem:'me'})}}
>
initialRoute={
{
component:Me,
title:'我的'
}
}
/>
);
}
});
conststyles= StyleSheet.create({
container: {
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF',
},
});
第四部输出
module.exports=Main;
效果图如下:
