1.3 底部导航

自己做项目中的重点知识，不是教程，如果学习的话可以拿来参考。源代码[地址][2]
[2]: https://github.com/BaiPeiHe/react-native
底部导航菜单
react-native-tab-navigator 地址

1、导入框架：

// 在根目录下执行
npm install react-native-tab-navigator --save

2、添加代码

// 导入框架
import TabNavigator from 'react-native-tab-navigator';

// 代码实现
export default class rn_demo extends Component {
    // 构造函数
    constructor(props){
        super(props);
        this.state={
        // 默认选中
            selectedTab: 'tb_popular',
        }
    }

    // 视图
    render() {
      return (
        
          
               }
                  renderSelectedIcon={() => }
                  badgeText="1"
                  onPress={() => this.setState({ selectedTab: 'tb_popular' })}>
                  
              
               }
                  renderSelectedIcon={() => }
                  onPress={() => this.setState({ selectedTab: 'tb_trending' })}>
                  
              
               }
                  renderSelectedIcon={() => }
                  badgeText="1"
                  onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
                  
              
               }
                  renderSelectedIcon={() => }
                  onPress={() => this.setState({ selectedTab: 'tb_my' })}>
                  
              
          
        
      );
    }
}

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

    page1:{
        flex:1,
        backgroundColor:'red',
    },

    page2:{
        flex:1,
        backgroundColor:'yellow',
    },

    iconImage:{
        height:22,
        width:22
    }
});

注意：
1、导入的图片1-3倍的都要有，引用正常尺寸的图片，rn 会自动的适配2倍和3倍的图片
2、react-native 中尺寸是与设备无关的，所以尺寸没有单位