rn 底部导航tab实现

1 ，安装  npm i -S react-native-tab-navigator

app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Image} from 'react-native';
import TabNavigator from "react-native-tab-navigator";
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


export default class App extends Component {
  constructor(props){
    super(props);
    this.state={
      selectedTab:'tb_popular',
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_popular'}
              selectedTitleStyle={{color:'red'}}
              title="最热"
              renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
              badgeText="1"
              onPress={() => this.setState({ selectedTab: 'tb_popular' })}>
            <View style={styles.page1}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_trending'}
              selectedTitleStyle={{color:'yellow'}}
              title="趋势"
              renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'yellow'}]} source={require('./res/images/ic_trending.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_trending' })}>
            <View style={styles.page2}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_favorite'}
              selectedTitleStyle={{color:'blue'}}
              title="收藏"
              renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_unstar_navbar.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'blue'}]} source={require('./res/images/ic_unstar_navbar.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
            <View style={styles.page3}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_my'}
              selectedTitleStyle={{color:'pink'}}
              title="我的"
              renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_my.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'pink'}]} source={require('./res/images/ic_my.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_my' })}>
            <View style={styles.page4}></View>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  }

  /*TabNavigator.Item 各个属性 的作用
  * selected={this.state.selectedTab === 'home'}  selected===home  该组件被选中
  * title="Home"  显示组件的文本是home
  * renderIcon={() => <Image source={require('./res/images/ic_polular.png')} />} 就是默认icon
  * renderSelectedIcon={() => <Image source={require('./res/images/ic_polular.png')} />} // 就是选中icon
  * onPress={() => this.setState({ selectedTab: 'profile' })}>  点击事件
  * badgeText="1"   信息数量 值为1
  * selectedTitleStyle={{color:'red'}} 选中后文字的颜色
  *
  * 组件内部的代码 代表着  导航tab 关联着的页面
  *
  * image 的style 可以接受 一个数组  其中 {tintColor:'red'} 意味着 把图片的背景 着色
  * */
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  page1:{
    flex:1,
    backgroundColor:'red',
  },
  page2:{
    flex:1,
    backgroundColor:'yellow',
  },
  page3:{
    flex:1,
    backgroundColor:'blue',
  },
  page4:{
    flex:1,
    backgroundColor:'pink',
  },
  image:{
    width:22,
    height:22
  }
});

说几个错误：

  1.error:   Cannot find module 'asap/raw'    // npm i   就解决了 

  2.Cannot find entry file index.ios.js [index.android.js] in any of the roots // 干掉node_module

坑的老夫不想说话  ，一步一报错 ，好难伺候啊