自己做項(xiàng)目中的重點(diǎn)知識(shí)抓于，不是教程震糖，如果學(xué)習(xí)的話可以拿來參考丈挟。源代碼[地址][2]
[2]: https://github.com/BaiPeiHe/react-native
底部導(dǎo)航菜單
react-native-tab-navigator 地址

1睦授、導(dǎo)入框架：

// 在根目錄下執(zhí)行
npm install react-native-tab-navigator --save

2锈锤、添加代碼

// 導(dǎo)入框架
import TabNavigator from 'react-native-tab-navigator';

// 代碼實(shí)現(xiàn)
export default class rn_demo extends Component {
    // 構(gòu)造函數(shù)
    constructor(props){
        super(props);
        this.state={
        // 默認(rèn)選中
            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="趨勢(shì)"
                  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院崇、導(dǎo)入的圖片1-3倍的都要有肆氓，引用正常尺寸的圖片，rn 會(huì)自動(dòng)的適配2倍和3倍的圖片
2底瓣、react-native 中尺寸是與設(shè)備無關(guān)的谢揪，所以尺寸沒有單位