View

• 個人感覺View就類似于html中的div標簽，支持flexbox布局。
• 一個簡單的練習，類似攜程的格子布局。

render() {
    return (
      <View style={[styles.flex]}>
        <View style={styles.container}>
          <View style={[styles.item,styles.center]}>
            <Text style={styles.font}>酒店</Text>
          </View>
          <View style={[styles.item,styles.lineLeft]}>
            <View style={[styles.flex,styles.center,styles.lineBottom]}>
              <Text style={styles.font}>機票</Text>
            </View>
            <View style={[styles.flex,styles.center]}>
              <Text style={styles.font}>火車票</Text>
            </View>
          </View>
          <View style={[styles.item,styles.lineLeft]}>
            <View style={[styles.flex,styles.center,styles.lineBottom]}>
              <Text style={styles.font}>旅游</Text>
            </View>
            <View style={[styles.flex,styles.center]}>
              <Text style={styles.font}>攻略</Text>
            </View>
          </View>
        </View>
      </View>

    );

Text

• Text類似于我們iOS開發中的UILabel控件。
• 比UILabel相比，我們實現富文本效果不必那么繁瑣，因為Text組件可以嵌套，內部Text組件可以繼承外部Text。這樣實現富文本效果只需要在內層嵌套Text設置不同的樣式表style就可以。

<View style={styles.headBox}>
        <Text style = {styles.font}>
          <Text style = {styles.titleStyle1}>網易</Text>
          <Text style = {styles.titleStyle2}>新聞</Text>
          <Text style = {styles.titleStyle3}>有態度"</Text>
        </Text>
      </View>

• Text可以通過onPress添加點擊事件。注意方法的綁定，以及箭頭函數的使用。
• onLongPress長按回調事件。
• numberOfLines 最多顯示多少行。
• onLayout function當組件布局發生變化時會調用這個方法。
• adjustsFontSizeToFit指定字體是否隨著給定樣式的限制而自動縮放。
• allowFontScaling控制字體是否要根據系統的“字體大小”輔助選項來進行縮放。
• selectable決定用戶是否可以長按選擇文本，以便復制和粘貼。

Navigator

• Navigator和NavigatorIOS都可以用來管理應用中“場景”的導航（也可以稱作屏幕）。導航器建立了一個路由棧，用來彈出，推入或者替換路由狀態。它們和html5中的history API很類似。主要的區別在于NavigatorIOS使用了iOS中的UINavigationController類，而Navigator則完全用js重寫了一個類似功能的React組件。因此Navigator可以兼容iOS和Android，而NavigatorIOS只能用于iOS。
• 導航器通過路由對象來分辨不同的場景。利用renderScene方法，導航欄可以根據指定的路由來渲染場景。
• 可以通過configureScene屬性獲取指定路由對象的配置信息，從而改變場景的動畫或者手勢。

render() {
    let rootViewName = 'FirstView';
    let rootComponent = FirstView;

    return (
      <Navigator
        initialRoute = {{ name: rootViewName, component: rootComponent }}
        configureScene = {(route) => {
          return Navigator.SceneConfigs.HorizontalSwipeJump ;
        }}
        renderScene = {(route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator = {navigator} />
        }} />
    );
  }

• push方法中通過params傳遞參數，通過傳遞方法到二級頁面，pop時調用實現回調方法

push = (Id) =>{
    var _this = this;
    const navigator = this.props.navigator;
    if (navigator) {
      navigator.push({
        name: 'SecondView',
        component: SecondView,
        params: {
          id: Id,
          getUser: function(user) {
            _this.setState({
              user: user
            })

          }
        }
      });
    }

  }

pop = () =>{
    if (this.props.navigator) {
      this.props.navigator.pop();
      let user = USER_MODELS[this.state.Id];
      this.props.getUser(user);
    }

  }

TextInput

• autoCapitalize：枚舉類型，可選值有none sentences wordscharacters 當用戶輸入時，用于提示
• placeholder：占位符，在輸入前顯示的文本內容
• value：文本輸入框的默認值
• placeholderTextColor：占位符文本的顏色
• password： boolean類型 true表示密碼輸入顯示*
• multiline：多行輸入
• editable：文本框是否可輸入
• autoFocus:自動聚焦
• clearButtonMode：枚舉類型，never while-editing unless-editing always 用于顯示清除按鈕
• maxLength：能夠輸入的最長字符數
• enablesReturnKeyAutomatically：如果為true表示沒有文本時鍵盤是不能有返回鍵的，其默認值為false
• returnKeyType：枚舉類型default go google join next route search send yahoo done emergency-call表示軟鍵盤返回鍵顯示的字符串
• secureTextEntry：隱藏輸入內容，默認值為false
• onChangeText：當文本輸入框的內容變化時，調用改函數；onChangeText接收一個文本的參數對象
• onChange：當文本變化時，調用該函數
• onEndEditing：當結束編輯時，調用改函數
• onBlur：失去焦點觸發事件
• onFocus：獲得焦點時觸發事件
• onSubmitEditing：當結束編輯后，點擊鍵盤的提交按鈕觸發該事件

Touchable類組件

• TouchableHighlight 高亮
• 屬性：activeOpacity(設置透明度)、onHideUnderlay、onShowUnderlay、underlayColor(點擊時背景陰影效果的背景顏色)
• TouchableOpacity 透明度
• 屬性：activeOpacity
• TouchableWithoutFeedback 無反饋 不會出現任何視覺變化
• 不建議使用；屬性：onLongPress、onPressIn、onPressOut
• 在app中我們希望點擊的時候會有一些視覺上的變化，這個變化會提醒我們已經點擊過了，從而避免重復點擊

Image

• resizeMode：圖片適用的模式cover、contain、stretch

• source:圖片的引用地址

• 網絡圖片：source={{uri:'http://.png'}}

• 本地圖片：source={require('./baidulogo.png')}

• 靜態圖片資源：注意：如果你添加圖片的時候packager正在運行，則你需要重啟packager以便能正確引入新添加的圖片

• 注意：為了使新的圖片資源機制正常工作，require中的圖片名字必須是一個靜態字符串。

• 如果你在編寫一個混合App（一部分UI使用React Native，而另一部分使用平臺原生代碼），也可以使用已經打包到App中的圖片資源（通過Xcode的asset類目或者Android的drawable文件夾打包）
  <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

• 注意：這一做法并沒有任何安全檢查。你需要自己確保圖片在應用中確實存在，而且還需要指定尺寸

• 注意：網絡圖片，你需要手動指定圖片的尺寸

• 關于圖片的尺寸，React Native會自動為你選好。如果沒有，則會選擇最接近的尺寸進行縮放，但也至少縮放到比所需尺寸大出50%，以使圖片看起來仍然足夠清晰。這一切過程都是自動完成的，所以你不用操心自己去完成這些繁瑣且易錯的代碼。

Picker

• View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
• onValueChange function方法,當選擇器item被選擇的時候進行調用。該方法被調用的時候回傳入一下兩個參數
• itemValue:該屬性值為被選中的item的屬性值
• itemPosition:該選擇器被選中的item的索引position
• selectedValue: any任何參數值，選擇器選中的item所對應的值，該可以是一個字符串或者一個數字
• style pickerStyleType 該傳入style樣式，設置picker的樣式風格
  enabled bool 如果該值為false，picker就無法被點擊選中。例如:用戶無法進行做出選擇
• mode enum ('dialog','dropdown') 選擇器模式。在Android平臺上面，設置mode可以控制用戶點擊picker彈出的樣式風格
• dialog: 該值為默認值，進行彈出一個模態dialog(彈出框)
• dropdown:以picker視圖為基礎，在該視圖下面彈出下拉框
• prompt string 設置picker的提示語(標題),在Android平臺上面，模式設置成'dialog',顯示彈出框的標題

<View style={styles.container}>
        <Text >
          Picker選擇器實例
        </Text>
        <Picker
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) => this.setState({language: value})}>
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="javaScript" />
        </Picker>
        <Text>當前選擇的是:{this.state.language}</Text>
      </View>

Switch

• View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
• disabled bool如果該值為true,用戶就無法點擊switch開關控件，默認為false
• onValueChange function 方法，當該組件的狀態值發生變化的時候回調方法
• value bool 該開關的值，如果該值為true的時候，開關呈打開狀態，默認為false

<View style={styles.container}>
        <Text>
           Swtich實例
        </Text>
        <Switch
          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
          style={{marginBottom:10,marginTop:10}}
          value={this.state.falseSwitchIsOn} />
        <Switch
          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn} />
      </View>

ProgressBar

• ProgressViewIOS
• progress number當前的進度值（0到1之間）。
• progressImage Image.propTypes.source一個可以拉伸的圖片，用于顯示進度條。
• progressTintColor string進度條本身染上的顏色。
• progressViewStyle enum('default', 'bar')進度條的樣式。
• trackImage Image.propTypes.source 一個可拉伸的圖片，用于顯示進度條后面的軌道。
• trackTintColor string 進度條軌道染上的顏色。

<View style={styles.container}>
            <ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/>
          </View>

componentDidMount() {
      this.updateProgress();
  }
  updateProgress() {
    var progress = this.state.progress + 0.01;
    this.setState({ progress });
    this.timer = requestAnimationFrame(() => this.updateProgress());
  }
  getProgress(offset) {
    console.log('11');
    var progress = this.state.progress + offset;
    return Math.sin(progress % Math.PI) % 1;
  }

• ProgressBarAndroid

• color string 進度條的顏色。

• indeterminate indeterminateType決定進度條是否要顯示一個不確定的進度。注意這個在styleAttr是Horizontal的時候必須是false。

• progress number當前的進度值（在0到1之間）。

• styleAttr STYLE_ATTRIBUTES進度條的樣式。可取值有：

  • Horizontal
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

<View style={styles.container}>
          <ProgressBarAndroid progress={this.state.progress} {...this.props} />
        </View>

WebView

• automaticallyAdjustContentInsets：是否自動調整內部內容

• bounces（IOS）：回彈效果 如果為false，則內容拉到底部或頭部不回彈，默認為true

• domStorageEnabled(Android)：僅限Android平臺。指定是否開啟DOM本地存儲

• javaScriptEnabled：僅限Android平臺。iOS平臺JavaScript是默認開啟的

• contentInset：內部內容偏移值 該值為一個JavaScript對象{top:number,left:number,bottom:number,right:number}

• source:{{uri:'網址'}}在WebView中載入一段靜態的html代碼或是一個url（還可以附帶一些header選項）{{html:'html代碼塊'}}

• injectedJavaScript:注入的js代碼，其值為字符串，如果加上了該屬性，就會在webview里面執行js代碼（在網頁加載之前注入）

• mediaPlaybackRequiresUserAction：設置頁面中的HTML5音視頻是否需要在用戶點擊后再開始播放。默認值為false

• onNavigationStateChange：監聽導航狀態變化的函數（當發現瀏覽器地址改變時，觸發事件）

• renderError：監聽渲染頁面出錯的函數

• startInLoadingState：是否開啟頁面加載的狀態

• renderLoading:webview組件正在渲染頁面時觸發的函數，需要同startInLoadingState一起使用，當startInLoadingState為true時該函數才起作用

• scrollEnabled（IOS）：表示webview里面頁面是否能滾動，如果其值為true則可以滾動，否則禁止滾動

• scalesPageToFit：按照頁面比例和內容寬高比例自動縮放內容

ListView

• 列表

  <ListView
                dataSource={this.dataSource.cloneWithRows(this.state.dataArr)}
                renderRow={this.renderRow} //設置cell
                style={{width:screenWidth}}
                onEndReached={ this._toEnd }
                onEndReachedThreshold={20}
                renderFooter={ this._renderFooter }
                enableEmptySections = {true}
                refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefresh}
                            onRefresh={this._onRefresh}
                            tintColor="gray"
                            title="Loading..."
                            titleColor="gray"
                            colors={['#ff0000', '#00ff00', '#0000ff']}
                            progressBackgroundColor="#ffff00"
                        />}
            />

• 卡片

<ListView //創建ListView
                dataSource={this.dataSource.cloneWithRows(this.state.car)} //設置數據源
                renderRow={this.renderRow} //設置cell
                contentContainerStyle={styles.listViewStyle}//設置cell的樣式
                onEndReached={ this._toEnd }
                onEndReachedThreshold={10}
                renderFooter={ this._renderFooter }
                enableEmptySections = {true}
                removeClippedSubviews={false}
                refreshControl={
                        <RefreshControl
                            refreshing={this.isRefreshing}
                            onRefresh={this._onRefresh}
                            tintColor="gray"
                            title="Loading..."
                            titleColor="gray"
                            colors={['#ff0000', '#00ff00', '#0000ff']}
                            progressBackgroundColor="#ffff00"
                        />}
            />

• 分組

render(){
        const { brand} = this.props;
        var  Arr = brand ,
            sectionIDs =[],//所有區ID的數組
            rowIDs =[];//行ID數組
        for (let i in brand ) {
            sectionIDs.push(i);
            rowIDs.push(brand[i])
        }
        return(
                <ListView//創建表，并設置返回section和cell的方法
                    dataSource={this.dataSource.cloneWithRowsAndSections(Arr,sectionIDs,rowIDs)}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    renderHeader={this.renderHeader }
                />
        )
    }