React Native——编写TabBar

做之前先看效果图：


直接在你的项目目录下安装组件：

npm install react-native-tab-navigator --save

接着直接粘贴下面代码到你的项目中（简单粗暴）：

import React,{
    
    Component} from 'react';
import {
    
    
  StyleSheet,
  Image,
} from 'react-native';
import HomeScreen from './pages/HomePage';
import TreasureChestScreen from './pages/TreasureChest';
import MyScreen from './pages/me';

import TabNavigator from 'react-native-tab-navigator';


export default class App extends Component {
    
    
  constructor(props) {
    
    
    super(props);
    this.state = {
    
    selectedTab: '首页'};
  }
  render(){
    
    
    return (
      <TabNavigator>
        <TabNavigator.Item
          selected={
    
    this.state.selectedTab === '首页'}
          title="首页"
          renderIcon={
    
    () => <Image style={
    
    bottom.icon} source={
    
    require('../images/index.png')} />}
          renderSelectedIcon={
    
    () => <Image style={
    
    bottom.icon} source={
    
    require('../images/index1.png')} />}
          onPress={
    
    () => this.setState({
    
     selectedTab: '首页' })}>
          <HomeScreen/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={
    
    this.state.selectedTab === '百宝箱'}
          title="百宝箱"
          renderIcon={
    
    () => <Image style={
    
    bottom.icon} source={
    
    require('../images/dynamic.png')} />}
          renderSelectedIcon={
    
    () => <Image style={
    
    bottom.icon} source={
    
    require('../images/dynamic1.png')} />}
          onPress={
    
    () => this.setState({
    
     selectedTab: '百宝箱' })}>
          <TreasureChestScreen/>
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={
    
    this.state.selectedTab === '我的'}
          title="我的"
          renderIcon={
    
    () => <Image style={
    
    bottom.icon} source={
    
    require('../images/me.png')} />}
          renderSelectedIcon={
    
    () => <Image style={
    
    bottom.icon} source={
    
    require('../images/me1.png')} />}
          onPress={
    
    () => this.setState({
    
     selectedTab: '我的' })}>
          <MyScreen/>
        </TabNavigator.Item>
    </TabNavigator>
    );
  }
 
}
const bottom = StyleSheet.create({
    
    
  icon:{
    
    
    height:20,
    width:20
  }
});

以上有几点需要注意：
第一、引入自定义的组件页面时，首字母要大写！
第二、初始化时是哪个页面需要在constructor函数中表明，上述代码段中已存在，直接复制即可。
第三、如需增加或减少Tabbar直接在呢个价或减少TabNavigator.Item的数量即可。

通过以上简单的步骤，就可以在React Native中实现TabBar啦~