React Native 組件

View

支持 布局、樣式、一些觸摸處理、和一些無(wú)障礙功能的容器

對(duì)應(yīng)原生平臺(tái)組件：
iOS=>UIView
Android =》android.view.View

View

Text

顯示文本的組件， 支持嵌套、樣式以及觸摸處理

屬性

* numberOfLines number
用來(lái)當(dāng)文本過(guò)長(zhǎng)的時(shí)候裁剪文本。包括折疊產(chǎn)生的換行在內(nèi)，總的行數(shù)不會(huì)超過(guò)這個(gè)屬性的限制。
* onPress function 
當(dāng)文本被點(diǎn)擊以后調(diào)用此回調(diào)函數(shù)。
* selectable function
決定用戶(hù)是否可以長(zhǎng)按選擇文本，以便復(fù)制和粘貼

樣式

* color
* fontSize
* fontStyle enum('normal', 'italic')
* fontWight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
* textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的對(duì)齊方式。其中'justify'值僅iOS支持，在Android上會(huì)變?yōu)閘eft

嵌套文本

iOS 中顯示富文本組件 NSAttributedString

<Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>
    and red
  </Text>
</Text>

Text

TextInput

允許用戶(hù)在應(yīng)用中通過(guò)鍵盤(pán)輸入文本的基本組件

屬性

* autoCapitalize enum('none', 'sentences', 'words', 'characters')
  控制TextInput是否要自動(dòng)將特定字符切換為大寫(xiě)：
  不設(shè)置/沒(méi)句話(huà)第一個(gè)字符(默認(rèn))/每個(gè)單詞第一個(gè)字符、所有字 符
* autoFocus bool
  如果為true，在componentDidMount后會(huì)獲得焦點(diǎn)。默認(rèn)值為 false
* editable bool 
  如果為false，文本框是不可編輯的。默認(rèn)值為true
* keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 
* maxLength number 
* multiline bool （默認(rèn) false）
* onBlur function  當(dāng)文本框失去焦點(diǎn)的時(shí)候調(diào)用此回調(diào)函數(shù)
* onChange function 當(dāng)文本框內(nèi)容變化時(shí)調(diào)用此回調(diào)函數(shù)
* onChangeText function 當(dāng)文本框內(nèi)容變化時(shí)調(diào)用此回調(diào)函數(shù)。改變后的文字內(nèi)容會(huì)作為參數(shù)傳遞。
* onEndEditing function 當(dāng)文本輸入結(jié)束后調(diào)用此回調(diào)函數(shù)
* onFocus function  當(dāng)文本框獲得焦點(diǎn)的時(shí)候調(diào)用此回調(diào)函數(shù)。
* onSelectionChange function 
長(zhǎng)按選擇文本時(shí)，選擇范圍變化時(shí)調(diào)用此函數(shù)，傳回參數(shù)的格式形如 { nativeEvent: { selection: { start, end } } }。
* onSubmitEditing function 
此回調(diào)函數(shù)當(dāng)軟鍵盤(pán)的確定/提交按鈕被按下的時(shí)候調(diào)用此函數(shù)。如果multiline={true}，此屬性不可用。
* placeholder string 如果沒(méi)有任何文字輸入，會(huì)顯示此字符串。
* placeholderTextColor color 占位字符串顯示的文字顏色。

TextInput

圖片

Image

顯示圖片的組件 （網(wǎng)絡(luò)圖片、靜態(tài)資源、臨時(shí)本地圖片、本地磁盤(pán)上）

靜態(tài)圖片資源

<Image source={require('./my-icon.png')} />

require中的圖片名字必須是一個(gè)靜態(tài)字符串

網(wǎng)絡(luò)圖片

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

指定參數(shù)

<Image source={{
  uri: 'https://facebook.github.io/react/img/logo_og.png',
  method: 'POST',
  headers: {
    Pragma: 'no-cache'
  },
  body: 'Your Body goes here'
}}
style={{width: 400, height: 400}} />

注：iOS中需設(shè)置 App Transport Security

Image
Image

Button

屬性

* color color 文本的顏色(iOS)，或是按鈕的背景色(Android)

* disabled bool 設(shè)置為true時(shí)此按鈕將不可點(diǎn)擊

* onPress function 用戶(hù)點(diǎn)擊此按鈕時(shí)所調(diào)用的處理函數(shù)

* title string 按鈕內(nèi)顯示的文本

* onPress function 按鈕點(diǎn)擊事件

Button

ScrollView

封裝了平臺(tái) ScrollView的組件

ScrollView 一次性渲染所有組件， 性能不足
ListView 惰性渲染，只渲染將要顯示在屏幕上的組件
FlatList 0.43 版本支持， 改進(jìn)版的ListView

屬性

horizontal bool 當(dāng)此屬性為true的時(shí)候，所有的子視圖會(huì)在水平方向上排成一行，而不是默認(rèn)的在垂直方向上排成一列。默認(rèn)值為false。

keyboardDismissMode enum('none', "interactive", 'on-drag') 
none (默認(rèn)) 拖拽時(shí)不隱藏鍵盤(pán)
on-drag 當(dāng)拖拽開(kāi)始的時(shí)候隱藏軟鍵盤(pán)
interactive 軟鍵盤(pán)伴隨拖拽操作同步地消失，并且如果往上滑動(dòng)會(huì)恢復(fù)鍵盤(pán)。安卓設(shè)備上不支持這個(gè)選項(xiàng)，會(huì)表現(xiàn)的和none一樣

showsHorizontalScrollIndicator bool #
當(dāng)此屬性為true的時(shí)候，顯示一個(gè)水平方向的滾動(dòng)條。
showsVerticalScrollIndicator bool #
當(dāng)此屬性為true的時(shí)候，顯示一個(gè)垂直方向的滾動(dòng)條。
pagingEnabled bool #
當(dāng)值為true時(shí)，滾動(dòng)條會(huì)停在滾動(dòng)視圖的尺寸的整數(shù)倍位置。這個(gè)可以用在水平分頁(yè)上。默認(rèn)值為false。
scrollEnabled bool #
當(dāng)值為false的時(shí)候，內(nèi)容不能滾動(dòng)，默認(rèn)值為true。

方法

scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) #
滾動(dòng)到指定的x, y偏移處。第三個(gè)參數(shù)為是否啟用平滑滾動(dòng)動(dòng)畫(huà)。
使用示例:
scrollTo({x: 0, y: 0, animated: true})

scrollToEnd(options?) #
滾動(dòng)到視圖底部（水平方向的視圖則滾動(dòng)到最右邊）。
加上動(dòng)畫(huà)參數(shù) scrollToEnd({animated: true})則啟用平滑滾動(dòng)動(dòng)畫(huà)，或是調(diào)用 scrollToEnd({animated: false})來(lái)立即跳轉(zhuǎn)。如果不使用參數(shù)，則animated選項(xiàng)默認(rèn)啟用。

ScrollView

ListView

屬性

dataSource ListView.DataSource 列表數(shù)據(jù)源

initialListSize number 指定在組件剛掛載的時(shí)候渲染多少行數(shù)據(jù)。用這個(gè)屬性來(lái)確保首屏顯示合適數(shù)量的數(shù)據(jù)，而不是花費(fèi)太多幀逐步顯示出來(lái)。

pageSize number 每次事件循環(huán)（每幀）渲染的行數(shù)。

onChangeVisibleRows function 
(visibleRows, changedRows) => void
當(dāng)可見(jiàn)的行的集合變化的時(shí)候調(diào)用此回調(diào)函數(shù)。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可見(jiàn)行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有剛剛改變了可見(jiàn)性的行，其中如果值為true表示一個(gè)行變得可見(jiàn)，而為false表示行剛剛離開(kāi)可視區(qū)域而變得不可見(jiàn)。

renderHeader function
renderFooter function 
() => renderable
頁(yè)頭與頁(yè)腳會(huì)在每次渲染過(guò)程中都重新渲染（如果提供了這些屬性）。如果它們重繪的性能開(kāi)銷(xiāo)很大，把他們包裝到一個(gè)StaticContainer或者其它恰當(dāng)?shù)慕Y(jié)構(gòu)中。頁(yè)腳會(huì)永遠(yuǎn)在列表的最底部，而頁(yè)頭會(huì)在最頂部。

renderRow function 
(rowData, sectionID, rowID, highlightRow) => renderable
從數(shù)據(jù)源(Data source)中接受一條數(shù)據(jù)，以及它和它所在section的ID。返回一個(gè)可渲染的組件來(lái)為這行數(shù)據(jù)進(jìn)行渲染。默認(rèn)情況下參數(shù)中的數(shù)據(jù)就是放進(jìn)數(shù)據(jù)源中的數(shù)據(jù)本身，不過(guò)也可以提供一些轉(zhuǎn)換器。
如果某一行正在被高亮（通過(guò)調(diào)用highlightRow函數(shù)），ListView會(huì)得到相應(yīng)的通知。當(dāng)一行被高亮?xí)r，其兩側(cè)的分割線(xiàn)會(huì)被隱藏。行的高亮狀態(tài)可以通過(guò)調(diào)用highlightRow(null)來(lái)重置

renderSectionHeader function
(sectionData, sectionID) => renderable
如果提供了此函數(shù)，會(huì)為每個(gè)小節(jié)(section)渲染一個(gè)粘性的標(biāo)題。
粘性是指當(dāng)它剛出現(xiàn)時(shí)，會(huì)處在對(duì)應(yīng)小節(jié)的內(nèi)容頂部；繼續(xù)下滑當(dāng)它到達(dá)屏幕頂端的時(shí)候，它會(huì)停留在屏幕頂端，一直到對(duì)應(yīng)的位置被下一個(gè)小節(jié)的標(biāo)題占據(jù)為止。可以使用 stickySectionHeadersEnabled來(lái)決定是否啟用其粘性特性。

renderSeparator function
(sectionID, rowID, adjacentRowHighlighted) => renderable
如果提供了此屬性，一個(gè)可渲染的組件會(huì)被渲染在每一行下面，除了小節(jié)標(biāo)題的前面的最后一行。在其上方的小節(jié)ID和行ID，以及鄰近的行是否被高亮?xí)鳛閰?shù)傳遞進(jìn)來(lái)

Example

export default class  ListViewExample extends Component{

    constructor(props) {

        super(props);

        var ds =new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state = {
            dataSource:ds,
            data:['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row 10','row 11','row 12']
        }
    }
    
    render(){
        return(
            <ListView
                dataSource={this.state.dataSource.cloneWithRows(this.state.data)}
                renderRow={(rowData, sectionId, rowId) => this._renderRow(rowData, sectionId,rowId)}
                renderSeparator={this._renderSeparator}
            />
        );
    }

    _renderRow(rowData:string, sectionID:number, rowID:number){

        var imgSource = THUMB_URLS[rowID];
        return (
            <TouchableOpacity>
                <View>
                    <View style={styles.row}>
                        <Image style={styles.thumb} source={imgSource} />
                        <Text style={{flex:1,fontSize:16,color:'blue'}}>
                            {rowData + '我是測(cè)試行號(hào)哦~'}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool){
        return (
            <View
                key={`${sectionID}-${rowID}`}
                style={{
                    height: adjacentRowHighlighted ? 4 : 1,
                    backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
                }}
            />
        );
    }
}

ListView

ListView.DataSource

ListView.DataSource

FlatList

FlatList

RefreshControl

RefreshControl

StatusBar

StatusBar

Slider

Slider

Switch

Switch

ActivityIndicator

ActivityIndicator

Picker

Picker

PickerIOS

PickerIOS

WebView

WebView