ReactNative-综合案例（01）

最近几天学了几个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代码的下面，否则会报已下错误：

![](/images/posts/2017-08-20.jpg)

- 如果图片是在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 (

);

}

}

AppRegistry.registerComponent(‘WYNews’, () => WYNews);

“`

效果如下：

下一篇将会讲解如何使用轮播图