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 (
        <View style={styles.container}>
          <TabNavigator>
              <TabNavigator.Item
                  selected={this.state.selectedTab === 'tb_popular'}
                  selectedTitleStyle={{color:'red'}}
                  title="最热"
                  renderIcon={() => <Image style={styles.iconImage} source={require('./res/images/ic_polular.png')} />}
                  renderSelectedIcon={() => <Image style={[styles.iconImage,{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:'red'}}
                  title="趋势"
                  renderIcon={() => <Image style={styles.iconImage} source={require('./res/images/ic_trending.png')} />}
                  renderSelectedIcon={() => <Image style={[styles.iconImage,{tintColor:'red'}]} 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:'red'}}
                  title="收藏"
                  renderIcon={() => <Image style={styles.iconImage} source={require('./res/images/ic_polular.png')} />}
                  renderSelectedIcon={() => <Image style={[styles.iconImage,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
                  badgeText="1"
                  onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
                  <View style={styles.page1}></View>
              </TabNavigator.Item>
              <TabNavigator.Item
                  selected={this.state.selectedTab === 'tb_my'}
                  selectedTitleStyle={{color:'red'}}
                  title="我的"
                  renderIcon={() => <Image style={styles.iconImage} source={require('./res/images/ic_trending.png')} />}
                  renderSelectedIcon={() => <Image style={[styles.iconImage,{tintColor:'red'}]} source={require('./res/images/ic_trending.png')} />}
                  onPress={() => this.setState({ selectedTab: 'tb_my' })}>
                  <View style={styles.page2}></View>
              </TabNavigator.Item>
          </TabNavigator>
        </View>
      );
    }
}

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 中尺寸是与设备无关的，所以尺寸没有单位