React Native学习笔记之--常用App框架的搭建（标签栏+导航栏）

React Native学习笔记之–常用App框架的搭建（标签栏+导航栏）

市面上面很多APP的框架都是使用标签栏加上导航栏的架构，今天就利用React Native框架来搭建适配iOS和Android双端的框架结构。

第一步进入项目工程引入标签栏的框架

npm i react-native-tab-navigator --save

出现如下图所示表示引入成功,并且在项目工程中可以看到对应文件





第二步就是查看文档和API如何使用它了



第三部引入导航栏Navigator（注意：导航栏需要自己定义才能显示）

部分代码如下：

/**
* Created by wangjie on 2016/12/5.
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Navigator,
Platform
} from 'react-native';

// npm i react-native-tab-navigator --save
import TabNavigator from 'react-native-tab-navigator';
import HomeView from '../Home/HomeView';
import BusinessView from '../Business/BusinessView';
import MineView from '../Mine/MineView';
import MoreView from '../More/MoreView';

export default class MainView extends Component {
// 构造
constructor(props) {
super(props);

// 代码关闭黄屏警告
console.disableYellowBox = true;

// 初始状态
this.state = {
selectedTab: 'home'
};
}

render() {
return(
<TabNavigator>
{this.renderTabBatItem('主页', 'icon_tabbar_homepage', 'icon_tabbar_homepage_selected', 'home', HomeView)}
{this.renderTabBatItem('商家', 'icon_tabbar_merchant_normal', 'icon_tabbar_merchant_selected', 'business', BusinessView)}
{this.renderTabBatItem('我的', 'icon_tabbar_mine', 'icon_tabbar_mine_selected', 'mine', MineView)}
{this.renderTabBatItem('更多', 'icon_tabbar_misc', 'icon_tabbar_misc_selected', 'more', MoreView)}
</TabNavigator>
);
}

renderTabBatItem(title, iconName, selectedIconName, selectedTabName, component) {
return(
<TabNavigator.Item
selected={this.state.selectedTab === selectedTabName}
title={title}
renderIcon={() => <Image source={{uri: iconName}} style={styles.iconStyle}/>}
renderSelectedIcon={() => <Image source={{uri: selectedIconName}} style={styles.iconStyle} />}
onPress={() => this.setState({ selectedTab: selectedTabName })}
selectedTitleStyle={styles.selectedTitleStyle}
>
<Navigator
initialRoute={{name: {title}, component: component}}
configureScene={() => {
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.passProps} navigator={navigator}/>
}}
/>
</TabNavigator.Item>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},

iconStyle:{
width: Platform.OS === 'ios' ? 30 : 24,
height:Platform.OS === 'ios' ? 30 : 24
},

selectedTitleStyle:{
color:'orange'
}
});

效果显示如下图所示：



Android模拟器显示效果：