市面上面很多APP的框架都是使用标签栏加上导航栏的架构,今天就利用React Native框架来搭建适配iOS和Android双端的框架结构。
- 第一步进入项目工程引入标签栏的框架
npm i react-native-tab-navigator --save
- 1
出现如下图所示表示引入成功,并且在项目工程中可以看到对应文件
- 第二步就是查看文档和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'
}
});
效果显示如下图所示:
来源:http://blog.csdn.net/wj610671226/article/details/53915775