React|React Native创建TabBar和导航栏 ReactNative创建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(
【React|React Native创建TabBar和导航栏】{/*首页*/}
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;
效果图如下:

文章图片

React|React Native创建TabBar和导航栏

推荐阅读

拔罐多久以后可以洗澡

股权激励对股价的影响有哪些

签到软件都有哪些

如何在戴尔服务器上安装固态硬盘？戴尔服务器固态怎么上的

河北的衣服批发那里最便宜啊

小程序目录结构分析,微信小程序目录结构说法正确的是

女性不孕不育的主要原因有哪些？

优质的干手器排行榜优质的干手器排行榜最新

四川豆瓣酱如何做四川豆瓣酱的做法教程

别再用养儿防老，来绑架年轻人结婚生孩子

志高空调遥控器说明,排查下这几个方面

module语法

不可缺

电商产品用户分析

吃辣的就流鼻涕是鼻炎吗

面膜贴多久合适取掉面膜贴多久

赞美男人有才华的句子赞美男人有才华的句子简短

《冰与火之歌》有哪些细思恐极的情节？

疫情结束后,让你明白了什么？

今年属猴人出门哪个方向好属猴离家出走会带什么随身物品