React Native创建TabBar和导航栏

首先来创建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;

效果图如下:


推荐阅读更多精彩内容