本文出自：我的个人博客：http://www.cenzhijun.top/
最近几天学了几个ReactNative组件，总觉得单纯的学几个组件进步慢，所以我打算做一些综合性的小案例，练习下实战，我从网上找到一个小案例
，感觉挺好，也学习了很多，代码内容可能不太一样，主要区别是：我把RN官方不推荐或者已经放弃了的组件进行了替换，如果有需要的可以互相参考下
源代码下载
建完一个工程之后，首先建一个WYMain.js文件，代码如下：
首先安装所需组件：
npm install --save react-navigation
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';
import WYHome from './WYHome';
import WYMessage from './WYMessage';
import WYFind from './WYFind';
import WYMine from './WYMine';
const TabNav = TabNavigator(
{
WYHome: {
screen: WYHome,
// path: '/',
navigationOptions: {
title: '首页', // 同步设置导航和tabbar文字,不推荐使用
// headerTitle: '首页', // 只设置导航栏文字
// header:{}, // 自定义导航条内容，如果需要隐藏可以设置为null
// headerBackTitle:null, // 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
// headerTruncatedBackTitle:'', // 设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。
// headerRight:{}, // 设置导航条右侧。可以是按钮或者其他。
// headerLeft:{}, // 设置导航条左侧。可以是按钮或者其他。
// headerStyle:{
// backgroundColor:'#4ECBFC'
// }, // 设置导航条的样式。如果想去掉安卓导航条底部阴影可以添加elevation: 0,iOS去掉阴影是。
// headerTitleStyle:{
// fontSize:30,
// color:'white'
// }, // 设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了
// headerBackTitleStyle:{}, // 设置导航条返回文字样式。
// headerTintColor:'green', // 设置导航栏文字颜色。总感觉和上面重叠了。
// gesturesEnabled:true, // 是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
// TabNavigator 属性部分
// title:'首页', // 同上
tabBarVisible:true, // 是否隐藏标签栏。默认不隐藏(true)
tabBarIcon: ({ tintColor, focused }) => (
focused
?
<Image
source={ {uri:'tabbar_home_highlighted'} }
style={styles.image}
/>
:
<Image
source={ {uri:'tabbar_home'} }
style={styles.image}
/>
),
},
},
WYMessage: {
screen: WYMessage,
// path: '/settings',
navigationOptions: {
title: '消息',
tabBarIcon: ({ tintColor, focused }) => (
focused
?
<Image
source={ {uri:'tabbar_message_center_highlighted'} }
style={styles.image}
/>
:
<Image
source={ {uri:'tabbar_message_center'} }
style={styles.image}
/>
),
},
},
WYFind: {
screen: WYFind,
navigationOptions: {
title: '发现',
tabBarIcon: ({ tintColor, focused }) => (
focused
?
<Image
source={ {uri:'tabbar_discover_highlighted'} }
style={styles.image}
/>
:
<Image
source={ {uri:'tabbar_discover'} }
style={styles.image}
/>
),
},
},
WYMine: {
screen: WYMine,
navigationOptions: {
title: '我的',
tabBarIcon: ({ tintColor, focused }) => (
focused
?
<Image
source={ {uri:'tabbar_profile_highlighted'} }
style={styles.image}
/>
:
<Image
source={ {uri:'tabbar_profile'} }
style={styles.image}
/>
),
},
},
},
{
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
tabBarOptions:{
activeTintColor: '#FF8403', // 改变tabBar选中字体颜色
// inactiveTintColor: '#CC9999', // 文字和图片默认颜色
// showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
// indicatorStyle: {
// height: 0
// }, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
// style: {
// backgroundColor: '#FFFF99', // TabBar 背景色
// },
labelStyle: {
fontSize: 11, // 文字大小
},
}
}
);
const StackNavigators = StackNavigator({
TabNav: {
screen: TabNav,
},
});
const styles = StyleSheet.create({
image: {
width:30,
height:30,
}
});
export default StackNavigators;
注意点
const StackNavigators = StackNavigator({
TabNav: {
screen: TabNav,
},
});
这段代码必须放在创建TabNav代码的下面，否则会报已下错误：
- 如果图片是在Xcode里面的Images.xcassets文件夹下，引入的时候，应该用如下格式：
source={ {uri:'tabbar_profile'} }
同时应当指定宽高才会显示出来
主要代码编写完成之后，只需在index.ios.js引入即可
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import WYMain from './Component/WYMain'
export default class WYNews extends Component {
render() {
return (
<WYMain />
);
}
}
AppRegistry.registerComponent('WYNews', () => WYNews);
效果如下：
