react-native 底部导航

最近开始学习React-native ，遇到底部导航  ，一直在报错误。

最后找到解决办法，快被整哭啦。。。。

  第一步 导入框架，npm install react-native-tab-navigator --save

第二步;在用到react-native-tab-navigator 的页面

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

第三步：构造方法

constructor(props) {
  super(props);
  // 初始状态
  this.state = {
      selectedTab:'home'
  };

}

第四步：

// 返回TabBar的Item
renderTabBarItem(title, selectedTab, image, selectedImage, view ) {
    return(
        <TabNavigator.Item
            selected={this.state.selectedTab === selectedTab}
            title={title}
            selectedTitleStyle={{color:'black'}}
            renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
            renderSelectedIcon={() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
            onPress={() => this.setState({ selectedTab: selectedTab })}>
                {view}  //不需要用到Navigator，直接把需要的页面加进来就可以了

                      
        TabNavigator.Item>
    );
}

第五步：

render() {
    return (
        <TabNavigator>
            {/* 首页 */}
            {this.renderTabBarItem("首页",'home','tabbar_home_30x30','tabbar_home_selected_30x30',<GDHome />)}
            {/* 海淘 */}
            {this.renderTabBarItem("海淘",'ht','tabbar_abroad_30x30','tabbar_abroad_selected_30x30',<GDHt />)}
            {/* 小时风云榜 */}
            {this.renderTabBarItem("小时风云榜",'hourlist','tabbar_rank_30x30','tabbar_rank_selected_30x30',<GDHourList/>)}
        TabNavigator>
    );
}