ReactNative--控件小記-更新中

1.屏幕分辨率

//引入
var Dimensions = require('Dimensions');

      <View style={styles.outViewStyle}>

            <Text> 當前屏幕的寬度：{Dimensions.get('window').width}</Text>
            <Text> 當前屏幕的高度：{Dimensions.get('window').height}</Text>
            <Text> 當前屏幕的分辨率：{Dimensions.get('window').scale}</Text>

      </View>

2.圖片的加載 <Image>

          //在項目中建立img文件夾，圖片放入其中
          <Text>1.從本地加載圖片</Text>
          <Image source={require('./img/icon.png')} style={styles.imageStyle}/>

          <Text>2.加載網絡圖片</Text>
          <Image source={{uri:'http://img.ivsky.com/img/tupian/pre/201804/02/guaiqiao_xiaomao-005.jpg'}} style={styles.imageStyle}/>


          <Text>3.從資源包中加載圖片</Text>//圖片放在ios項目中的Images.xcassets裏面，11爲圖片名字
          <Image source = {{uri:'11'}} style={styles.imageStyle}/>

          <Text>4.用圖片當做背景</Text>
          <ImageBackground

              source={{uri:'http://img.ivsky.com/img/tupian/pre/201804/02/guaiqiao_xiaomao-005.jpg'}} style={styles.imageStyle}>
              <Text style={{marginTop:40, backgroundColor:'transparent'}}> 可愛的小貓咪</Text>

          </ImageBackground>


imageStyle:{

        //width:150,
        //height:200,
        //圓角
        //borderRadius:10,
        //resizeMode:'cover',
        flex:1

    },

小demo：

代碼：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, ImageBackground} from 'react-native';

//導入本地js數據
var BadgeData = require('./BadgeData.json');
//引入
var Dimensions = require('Dimensions');
//定義全局變量
var {width} = Dimensions.get('window');
//每行的個數
var clos = 3;
//每個View的寬度
var boxWidth = 100;
//View之間的間隙
var vMargin = (width-clos*boxWidth)/(clos+1);
//頂部距離
var hMargin = 25;

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',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
 {this.renderAllBadge()}

      </View>


    );
  }
  //不是常量，必須要用{} 括起來

//返回所有的包
   renderAllBadge(){
      //定義一個數組，裝所有子組件
       var allBage = [];
       //便利json數據
       for (var i=0; i<BadgeData.data.length; i++){
           //取出單獨的數據對象
           var badge = BadgeData.data[i];
           //直接轉入數組
           allBage.push(
               <View key={i} style={styles.outViewStyle}>
                   <Image style={styles.imageStyle} source={{uri:badge.icon}}/>
                   <Text style={styles.mainTitleStyle}>{badge.title}</Text>
               </View>
           );

       }
//返回數組
       return allBage;


   }


}

const styles = StyleSheet.create({
  container: {

      //改變主軸的方向
      //flexDirection:'row',
      //上邊距
      // marginTop:30,
      //設置主軸的對其方式
      //justifyContent:'flex-start',
      //定義側軸對其方式
      //alignItems:'center',
      //顯示不全，換行顯示
      // flexWrap:'wrap-reverse',
      //backgroundColor:'#f5fcff',
      //flex:1,
      flexDirection:'row',
      flexWrap:'wrap'

    },

    outViewStyle:{

      backgroundColor:'gray',
        //設置側軸對其方式
       alignItems:'center',
        width:boxWidth,
        height:boxWidth,
        marginLeft:vMargin,
        marginTop:hMargin,

    },
    imageStyle:{

      width:80,
      height:80,
    },
    mainTitleStyle:{


    },

    innerViewStyle:{

      backgroundColor:'green',

        width:200,
        height:50,
    },
    innerViewStyle2:{

        backgroundColor:'yellow',

        width:100,
    },



});

//BadgeData.json 
{
  "data":[
    {
      "icon" : "danjianbao",
      "title" : "單肩包"
    },
    {
      "icon" : "liantiaobao",
      "title" : "鏈條包"
    },
    {
      "icon" : "qianbao",
      "title" : "錢包"
    },
    {
      "icon" : "shoutibao",
      "title" : "手提包"
    },
    {
      "icon" : "shuangjianbao",
      "title" : "雙肩包"
    },
    {
      "icon" : "xiekuabao",
      "title" : "斜挎包"
    }
  ]
}

//圖片放在ios的Images.xcassets裏面，BadgeData.json裏面icon對應相應的圖片名字

3.文本框展示 <TextInput>

4.獲取DOM點

<View style={styles.container} ref="topView">

//拿到view
this.refs.topView

5.滾動視圖<ScrollView>

             //橫向滾動
             horizontal={true}
             //隱藏滾動條
             showsHorizontalScrollIndicator={false}
             //自動分頁
             pagingEnabled={true}
             //一幀滾動結束
             onMomentumScrollEnd = {(e) =>this.onScrollAnimationEnd(e)}
             //開始拖動
             onScrollBeginDrag = {this.onScrollBeginDrag.bind(this)}
             //停止拖拽
             onScrollEndDrag = {this.onScrollEndDrag.bind(this)}

小demo：簡單是圖片輪播圖

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

import React, {Component} from 'react';
import { StyleSheet, View, Text, ScrollView, Image} from 'react-native';

//引入計時器類庫
import TimerMixin from '../node_modules/react-timer-mixin';
//引入json數據
import ImageData from '../ImageData.json';
//引入Dimensions文件
var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');

 class TestScrollView extends React.Component{
    //註冊定時器
    //  mixins:[TimerMixin]


     constructor(props){
         super(props);

         //當前的頁碼
         this.state = { currentPagePoint:0 };
         //定義定時器
         var timer1 = null;
            //設置固定值
         timeDuration = 1000;


     }
     //返回所有的圖片
     renderAllImage(){
         //數組
         var allImages = [];
         //拿到圖形數組
         var imagesArr = ImageData.data;
         //便利數組
         for(var i=0;  i<imagesArr.length; i++){
           //取出單獨是對象
             var imgItem = imagesArr[i];
             //創建組件裝入數組
             allImages.push(
               <Image key ={i}
                      source={{uri:imgItem.img}}
                      style={{width:width, height:width*0.5,}}//resizeMode:'contain'
               />
             );
         }
         //返回數組
         return allImages;

     }

     //返回5個人圓點
     renderFivePoint(){
      //定義一個數組放置所有的圓點
         var indicatorArr = [];

         var pointStyle;
         //拿到圖片的數組
         var imgsArr = ImageData.data;
         //遍歷
         for(var  i=0; i<imgsArr.length; i++){
             //判斷
             pointStyle = (i==this.state.currentPagePoint) ?{color:'orange'} :{color:'#ffffff'}

             //把圓點裝入數組
             indicatorArr.push(
              <Text key={i} style={[{fontSize:25}, pointStyle]}>&bull;</Text>
             );
         }

      return indicatorArr;
     }

     //當一幀滾動結束是調用
     onScrollAnimationEnd(e){
         //1.求出水平方向的偏移量
         var offsetX = e.nativeEvent.contentOffset.x;
         //2.根據偏移量求出當前的頁數
         var currentPage = Math.floor(offsetX/width);
         //3.更新狀態機，重新繪製UI
         this.setState({
             currentPagePoint:currentPage
         });

     }

     //實現一些複雜操作
     componentDidMount() {
         //開啓定時器
         this.startTimer();

     }
     //開啓定時器
     startTimer(){

         //1.拿到scrollView
         var scrollView = this.refs.scrollView;
         //拿到數組邊界值
         var imgCount = ImageData.data.length;

         //2.添加定時器
         this.timer1 = setInterval(()=>{
             //2.1設置圓點
             var activePage = 0;
             //2.2 判斷
             if((this.state.currentPagePoint+1) >= imgCount){
                 //越界
                 activePage = 0;
             }else {
                 activePage = this.state.currentPagePoint+1;
             }
             //2.3更新狀態機
             this.setState({
              currentPagePoint:activePage
             });
             //2.4scrollView滾動
             var offSetX = activePage * width;
             scrollView.scrollResponderScrollTo({x:offSetX, y:0, animated:true});


         }, timeDuration);

     }
     //開始拖拽調用
     onScrollBeginDrag(){
         //停止定時器
         clearInterval(this.timer1);
     }

     //停止拖拽
     onScrollEndDrag(){
         //開啓定時器
         this.startTimer();

     }
     render(){

         return(
         <View style={styles.container}>

         <ScrollView
             ref="scrollView"
             //橫向滾動
             horizontal={true}
             //隱藏滾動條
             showsHorizontalScrollIndicator={false}
             //自動分頁
             pagingEnabled={true}
             //一幀滾動結束
             onMomentumScrollEnd = {(e) =>this.onScrollAnimationEnd(e)}
             //開始拖動
             onScrollBeginDrag = {this.onScrollBeginDrag.bind(this)}
             //停止拖拽
             onScrollEndDrag = {this.onScrollEndDrag.bind(this)}
         >
             {this.renderAllImage()}

         </ScrollView>
             {/*返回指示器*/}
             <View style={styles.pageViewStyle}>
                 {/*返回5個圓點*/}
                 {this.renderFivePoint()}

             </View>

         </View>

         );
     }
 }

const styles = StyleSheet.create({

    container:{

    marginTop:40,
        // backgroundColor:'red',
    },

    pageViewStyle:{
        width:width,
        height:30,
        backgroundColor:'rgba(0, 0, 0, 0.4)',

        //定位
        position:'absolute',
        bottom:0,

        //設置主軸方向
        flexDirection:'row',
        //設置側軸對齊方式
        alignItems:'center',
    },
});

export {TestScrollView as default};

6.列表視圖<ListView>

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

import React, {Component} from 'react';
import { StyleSheet, View, Image, Text, ListView, TouchableOpacity, AlertIOS} from 'react-native';

//導入數據源
//import Wine from "../Wine";

var Car = require('../Car.json');
//引入
let Dimensions = require('Dimensions');

//定義全局變量
let {width, height} = Dimensions.get('window');


 class CarListView extends React.Component {


     constructor(props){
         super(props);

         let getSectionData ;
         getSectionData  = (dataBlob, sectionID) =>{
             return dataBlob[sectionID];
         }
         let getRowData;
         getRowData = (dataBlob, sectionID, rowID) => {

             return dataBlob[sectionID + ':' + rowID];
         };

         //1.1設置數據源
         this.state ={
             dataArr : new ListView.DataSource({
                 getSectionData:getSectionData,//獲取組中的數據
                 getRowData:getRowData,//獲取行中的數據

                 rowHasChanged:(r1, r2) => r1 !== r2,
                 sectionHeaderHasChanged:(s1, s2) => s1 !== s2,
             }),

         }
     }

     //複雜的操作：數據請求，異步操作（定時器）
     componentDidMount() {
         //調用js數據
         this.loadDataFromJson();
     }

     //調用js數據
     loadDataFromJson(){
       //拿到json數據
         let jsonData = Car.data;
         //定義一些變量
         let dataBlob = {};
         sectionIDs = [];
         rowIDs = [];
         carsArr =[];

         //便利
         for (var i=0; i<jsonData.length; i++){
             //1.把組號 放入數組中
             sectionIDs.push(i);
             //2.把組中的內容放到dataBlob對象中
             dataBlob[i] = jsonData[i].title;
             //3.取出改組中所有的車
             carsArr = jsonData[i].cars;
             rowIDs[i] = [];
             //4便利所有的車數組
             for (var j=0; j<carsArr.length; j++){
                 //把行號放入rowIDs
                 rowIDs[i].push(j);
                 //把每一行中的內容放入dataBlob中
                dataBlob[i +':' +j] = carsArr[j];

             }
         }

         //更新狀態
         this.setState({
             dataArr :this.state.dataArr.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)

         });
     }

     //設置render函數
     render() {
         return (

             <View style={styles.outerViewStyle}>

                 {/*頭部*/}
                 <View style={styles.headerViewStyle}>
                     <Text style={{color:'white', fontSize:25}}> SeeMyGo品牌</Text>
                 </View>

                 <ListView
                     dataSource={this.state.dataArr}
                     renderRow={this.renderRow}
                     renderSectionHeader={this.renderSection}

                 />
             </View>
         );
     }

     //每一行的數據
     renderRow(rowData){
       return(
           <TouchableOpacity activeOpacity={0.5}>
              <View style={styles.rowStyle}>

                  <Image source={{uri:rowData.icon}} style={styles.rowImgeStyle}/>
                  <Text style={{marginLeft:5}}>{rowData.name}</Text>
              </View>

           </TouchableOpacity>
       );
     }

     //每一組中的數據
     renderSection(sectonData, sectionID){
       return(
           <View style={styles.sectionHeaderStyle}>

              <Text style={{fontSize:20, marginLeft:5,paddingTop:6}}> {sectonData} </Text>
           </View>
       );
     }
}

const styles = StyleSheet.create({

    outerViewStyle:{

        flex:1,

    },
    headerViewStyle:{
        height:64,
        backgroundColor:'orange',

        justifyContent:'center',
        alignItems:'center'

    },
    rowStyle:{
        //設置主軸方向
        flexDirection:'row',
        //側軸方向居中
        alignItems:'center',
        padding:10,

        borderBottomColor:'#e8e8e8',
        borderBottomWidth:0.5,

    },
    rowImgeStyle:{
        width:80,
        height:90,
    },
    sectionHeaderStyle:{

        backgroundColor:'#e8e8e8',
        height:40,
        // justifyContent:'center',
        // paddingTop:10,

    },

});

export {CarListView as default};

Car.js 文件
{
  "data": [
    {
      "cars": [
        {
          "icon": "m_180_100.png",
          "name": "AC Schnitzer"
        },
        {
          "icon": "m_92_100.png",
          "name": "阿爾法·羅密歐"
        },
        {
          "icon": "m_9_100.png",
          "name": "奧迪"
        },
        {
          "icon": "m_97_100.png",
          "name": "阿斯頓·馬丁"
        }
      ],
      "title": "A"
    },
    {
      "cars": [
        {
          "icon": "m_172_100.png",
          "name": "巴博斯"
        },
        {
          "icon": "m_157_100.png",
          "name": "寶駿"
        },
        {
          "icon": "m_3_100.png",
          "name": "寶馬"
        },
        {
          "icon": "m_82_100.png",
          "name": "保時捷"
        },
        {
          "icon": "m_163_100.png",
          "name": "北京汽車"
        },
        {
          "icon": "m_211_100.png",
          "name": "北汽幻速"
        },
        {
          "icon": "m_168_100.png",
          "name": "北汽威旺"
        },
        {
          "icon": "m_14_100.png",
          "name": "北汽製造"
        },
        {
          "icon": "m_2_100.png",
          "name": "奔馳"
        },
        {
          "icon": "m_59_100.png",
          "name": "奔騰"
        },
        {
          "icon": "m_26_100.png",
          "name": "本田"
        },
        {
          "icon": "m_5_100.png",
          "name": "標緻"
        },
        {
          "icon": "m_127_100.png",
          "name": "別克"
        },
        {
          "icon": "m_85_100.png",
          "name": "賓利"
        },
        {
          "icon": "m_15_100.png",
          "name": "比亞迪"
        },
        {
          "icon": "m_135_100.png",
          "name": "布加迪"
        }
      ],
      "title": "B"
    },
    {
      "cars": [
        {
          "icon": "m_129_100.png",
          "name": "昌河"
        }
      ],
      "title": "C"
    },
    {
      "cars": [
        {
          "icon": "m_113_100.png",
          "name": "道奇"
        },
        {
          "icon": "m_165_100.png",
          "name": "大通"
        },
        {
          "icon": "m_8_100.png",
          "name": "大衆"
        },
        {
          "icon": "m_27_100.png",
          "name": "東風"
        },
        {
          "icon": "m_197_100.png",
          "name": "東風風度"
        },
        {
          "icon": "m_141_100.png",
          "name": "東風風神"
        },
        {
          "icon": "m_115_100.png",
          "name": "東風風行"
        },
        {
          "icon": "m_205_100.png",
          "name": "東風小康"
        },
        {
          "icon": "m_29_100.png",
          "name": "東南"
        },
        {
          "icon": "m_179_100.png",
          "name": "DS"
        }
      ],
      "title": "D"
    },
    {
      "cars": [
        {
          "icon": "m_91_100.png",
          "name": "法拉利"
        },
        {
          "icon": "m_199_100.png",
          "name": "飛馳商務車"
        },
        {
          "icon": "m_164_100.png",
          "name": "菲斯克"
        },
        {
          "icon": "m_40_100.png",
          "name": "菲亞特"
        },
        {
          "icon": "m_7_100.png",
          "name": "豐田"
        },
        {
          "icon": "m_67_100.png",
          "name": "福迪"
        },
        {
          "icon": "m_190_100.png",
          "name": "弗那薩利"
        },
        {
          "icon": "m_208_100.png",
          "name": "福汽啓騰"
        },
        {
          "icon": "m_17_100.png",
          "name": "福特"
        },
        {
          "icon": "m_128_100.png",
          "name": "福田"
        }
      ],
      "title": "F"
    },
    {
      "cars": [
        {
          "icon": "m_109_100.png",
          "name": "GMC"
        },
        {
          "icon": "m_110_100.png",
          "name": "光岡"
        },
        {
          "icon": "m_147_100.png",
          "name": "廣汽"
        },
        {
          "icon": "m_63_100.png",
          "name": "廣汽吉奧"
        },
        {
          "icon": "m_133_100.png",
          "name": "廣汽日野"
        },
        {
          "icon": "m_182_100.png",
          "name": "觀致汽車"
        }
      ],
      "title": "G"
    },
    {
      "cars": [
        {
          "icon": "m_31_100.png",
          "name": "哈飛"
        },
        {
          "icon": "m_196_100.png",
          "name": "哈弗"
        },
        {
          "icon": "m_170_100.png",
          "name": "海格"
        },
        {
          "icon": "m_32_100.png",
          "name": "海馬"
        },
        {
          "icon": "m_149_100.png",
          "name": "海馬商用車"
        },
        {
          "icon": "m_181_100.png",
          "name": "恆天汽車"
        },
        {
          "icon": "m_58_100.png",
          "name": "紅旗"
        },
        {
          "icon": "m_52_100.png",
          "name": "黃海"
        },
        {
          "icon": "m_112_100.png",
          "name": "華泰"
        },
        {
          "icon": "m_45_100.png",
          "name": "匯衆"
        }
      ],
      "title": "H"
    },
    {
      "cars": [
        {
          "icon": "m_35_100.png",
          "name": "江淮"
        },
        {
          "icon": "m_37_100.png",
          "name": "江鈴"
        },
        {
          "icon": "m_38_100.png",
          "name": "江南"
        },
        {
          "icon": "m_98_100.png",
          "name": "捷豹"
        },
        {
          "icon": "m_143_100.png",
          "name": "吉利帝豪"
        },
        {
          "icon": "m_144_100.png",
          "name": "吉利全球鷹"
        },
        {
          "icon": "m_148_100.png",
          "name": "吉利英倫"
        },
        {
          "icon": "m_39_100.png",
          "name": "金盃"
        },
        {
          "icon": "m_57_100.png",
          "name": "金龍聯合"
        },
        {
          "icon": "m_161_100.png",
          "name": "金旅客車"
        },
        {
          "icon": "m_152_100.png",
          "name": "九龍"
        },
        {
          "icon": "m_4_100.png",
          "name": "Jeep"
        }
      ],
      "title": "J"
    },
    {
      "cars": [
        {
          "icon": "m_188_100.png",
          "name": "卡爾森"
        },
        {
          "icon": "m_107_100.png",
          "name": "凱迪拉克"
        },
        {
          "icon": "m_150_100.png",
          "name": "開瑞"
        },
        {
          "icon": "m_51_100.png",
          "name": "克萊斯勒"
        },
        {
          "icon": "m_145_100.png",
          "name": "科尼塞克"
        },
        {
          "icon": "m_212_100.png",
          "name": "KTM"
        }
      ],
      "title": "K"
    },
    {
      "cars": [
        {
          "icon": "m_86_100.png",
          "name": "蘭博基尼"
        },
        {
          "icon": "m_200_100.png",
          "name": "藍海房車"
        },
        {
          "icon": "m_80_100.png",
          "name": "勞斯萊斯"
        },
        {
          "icon": "m_94_100.png",
          "name": "雷克薩斯"
        },
        {
          "icon": "m_99_100.png",
          "name": "雷諾"
        },
        {
          "icon": "m_146_100.png",
          "name": "蓮花"
        },
        {
          "icon": "m_153_100.png",
          "name": "獵豹汽車"
        },
        {
          "icon": "m_76_100.png",
          "name": "力帆"
        },
        {
          "icon": "m_16_100.png",
          "name": "鈴木"
        },
        {
          "icon": "m_166_100.png",
          "name": "理念"
        },
        {
          "icon": "m_95_100.png",
          "name": "林肯"
        },
        {
          "icon": "m_36_100.png",
          "name": "陸風"
        },
        {
          "icon": "m_96_100.png",
          "name": "路虎"
        },
        {
          "icon": "m_83_100.png",
          "name": "路特斯"
        }
      ],
      "title": "L"
    },
    {
      "cars": [
        {
          "icon": "m_183_100.png",
          "name": "邁凱倫"
        },
        {
          "icon": "m_93_100.png",
          "name": "瑪莎拉蒂"
        },
        {
          "icon": "m_18_100.png",
          "name": "馬自達"
        },
        {
          "icon": "m_79_100.png",
          "name": "MG"
        },
        {
          "icon": "m_81_100.png",
          "name": "MINI"
        },
        {
          "icon": "m_201_100.png",
          "name": "摩根"
        }
      ],
      "title": "M"
    },
    {
      "cars": [
        {
          "icon": "m_155_100.png",
          "name": "納智捷"
        }
      ],
      "title": "N"
    },
    {
      "cars": [
        {
          "icon": "m_104_100.png",
          "name": "歐寶"
        },
        {
          "icon": "m_84_100.png",
          "name": "謳歌"
        },
        {
          "icon": "m_171_100.png",
          "name": "歐朗"
        }
      ],
      "title": "O"
    },
    {
      "cars": [
        {
          "icon": "m_156_100.png",
          "name": "啓辰"
        },
        {
          "icon": "m_43_100.png",
          "name": "慶鈴"
        },
        {
          "icon": "m_42_100.png",
          "name": "奇瑞"
        },
        {
          "icon": "m_28_100.png",
          "name": "起亞"
        }
      ],
      "title": "Q"
    },
    {
      "cars": [
        {
          "icon": "m_30_100.png",
          "name": "日產"
        },
        {
          "icon": "m_78_100.png",
          "name": "榮威"
        },
        {
          "icon": "m_142_100.png",
          "name": "瑞麒"
        }
      ],
      "title": "R"
    },
    {
      "cars": [
        {
          "icon": "m_25_100.png",
          "name": "三菱"
        },
        {
          "icon": "m_209_100.png",
          "name": "山姆"
        },
        {
          "icon": "m_195_100.png",
          "name": "紳寶"
        },
        {
          "icon": "m_50_100.png",
          "name": "雙環"
        },
        {
          "icon": "m_102_100.png",
          "name": "雙龍"
        },
        {
          "icon": "m_111_100.png",
          "name": "斯巴魯"
        },
        {
          "icon": "m_10_100.png",
          "name": "斯柯達"
        },
        {
          "icon": "m_89_100.png",
          "name": "smart"
        }
      ],
      "title": "S"
    },
    {
      "cars": [
        {
          "icon": "m_202_100.png",
          "name": "泰卡特"
        },
        {
          "icon": "m_189_100.png",
          "name": "特斯拉"
        }
      ],
      "title": "T"
    },
    {
      "cars": [
        {
          "icon": "m_140_100.png",
          "name": "威麟"
        },
        {
          "icon": "m_186_100.png",
          "name": "威茲曼"
        },
        {
          "icon": "m_19_100.png",
          "name": "沃爾沃"
        },
        {
          "icon": "m_48_100.png",
          "name": "五菱"
        }
      ],
      "title": "W"
    },
    {
      "cars": [
        {
          "icon": "m_13_100.png",
          "name": "現代"
        },
        {
          "icon": "m_174_100.png",
          "name": "星客特"
        },
        {
          "icon": "m_71_100.png",
          "name": "新凱"
        },
        {
          "icon": "m_87_100.png",
          "name": "西雅特"
        },
        {
          "icon": "m_49_100.png",
          "name": "雪佛蘭"
        },
        {
          "icon": "m_6_100.png",
          "name": "雪鐵龍"
        }
      ],
      "title": "X"
    },
    {
      "cars": [
        {
          "icon": "m_194_100.png",
          "name": "揚州亞星客車"
        },
        {
          "icon": "m_138_100.png",
          "name": "野馬汽車"
        },
        {
          "icon": "m_100_100.png",
          "name": "英菲尼迪"
        },
        {
          "icon": "m_53_100.png",
          "name": "一汽"
        },
        {
          "icon": "m_41_100.png",
          "name": "依維柯"
        },
        {
          "icon": "m_75_100.png",
          "name": "永源"
        }
      ],
      "title": "Y"
    },
    {
      "cars": [
        {
          "icon": "m_136_100.png",
          "name": "長安轎車"
        },
        {
          "icon": "m_159_100.png",
          "name": "長安商用"
        },
        {
          "icon": "m_21_100.png",
          "name": "長城"
        },
        {
          "icon": "m_203_100.png",
          "name": "之諾"
        },
        {
          "icon": "m_60_100.png",
          "name": "中華"
        },
        {
          "icon": "m_167_100.png",
          "name": "中歐"
        },
        {
          "icon": "m_77_100.png",
          "name": "衆泰"
        },
        {
          "icon": "m_204_100.png",
          "name": "中通客車"
        },
        {
          "icon": "m_33_100.png",
          "name": "中興"
        }
      ],
      "title": "Z"
    }
  ]
}

7.標籤欄<TabBarIOS>和導航欄<NavigatorIOS>

直接上demo：

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Text, TabBarIOS, NavigatorIOS } from 'react-native';

//引入文件
import YNHome from './YNHome';
import YNFind from './YNFind';
import YNMessage from './YNMessage';
import YNMine from './YNMine';

class YNMain extends React.Component{

    constructor(props){
        super(props);

        //被選中的item
        this.state = {

            selectTabBarItem:'home'
        }
    }
    render(){
        return(

              // 標籤欄
           <TabBarIOS
           tintColor='orange'
           >

               {/*首頁*/}
               <TabBarIOS.Item
                   icon={{uri:'tabbar_home', scale:2}}
                   selectedIcon={{uri:'tabbar_home_highlighted', scale:2}}
                   title="首頁"
                   selected={ this.state.selectTabBarItem == 'home'}
                   onPress={() => {
                          this.setState({selectTabBarItem: 'home'})
                   }}

               >
                   {/*導航欄*/}
                 <NavigatorIOS
                     initialRoute={{
                     component:YNHome,
                     title:'新聞'
                      }}
                 />


               </TabBarIOS.Item>

               {/*發現*/}
               <TabBarIOS.Item
                   icon={{uri: 'tabbar_discover', scale:2}}
                   selectedIcon={{uri:'tabbar_discover_highlighted', scale:2}}
                   title="發現"
                   selected={ this.state.selectTabBarItem == 'discover'}
                   onPress={() => {
                         this.setState({selectTabBarItem: 'discover'})
                   }}

               >
                   <NavigatorIOS
                       initialRoute={{
                          component:YNFind,
                           title:'發現'
                       }}
                   />
               </TabBarIOS.Item>

               {/*消息*/}
               <TabBarIOS.Item

                   icon={{uri: 'tabbar_message_center', scale:2}}
                   selectedIcon={{uri:'tabbar_message_center_highlighted', scale:2}}
                   title="消息"
                   selected={ this.state.selectTabBarItem == 'message'}
                   onPress={() => {
                          this.setState({selectTabBarItem: 'message'})
                   }}

               >
                   <NavigatorIOS
                       initialRoute={{
                          component:YNMessage,
                           title:'消息'
                       }}
                   />
               </TabBarIOS.Item>

               {/*我的*/}
               <TabBarIOS.Item
                   icon={{uri: 'tabbar_profile', scale:2}}
                   selectedIcon={{uri:'tabbar_profile_highlighted', scale:2}}
                   title="我的"
                   selected={ this.state.selectTabBarItem == 'mine'}
                   onPress={() => {
                          this.setState({selectTabBarItem: 'mine'})
                   }}

                >
                   <NavigatorIOS
                       initialRoute={{
                          component:YNMine,
                           title:'我的'
                       }}
                   />
               </TabBarIOS.Item>

           </TabBarIOS>

        );
    }
}

const styles = StyleSheet.create({



});
export {YNMain as default};