8.Modal組件：[是一種簡(jiǎn)單的覆蓋在其他視圖之上顯示內(nèi)容的方式]
屬性：
visiblevisible屬性決定 modal 是否顯示。
supportedOrientationssupportedOrientations用于指定在設(shè)備切換橫豎屏方向時(shí)，modal 會(huì)在哪些屏幕朝向下跟隨旋轉(zhuǎn)。在 iOS 上，除了本屬性外，還會(huì)受到應(yīng)用的 Info.plist 文件中UISupportedInterfaceOrientations的限制。如果還設(shè)置了presentationStyle屬性為pageSheet或formSheet，則在 iOS 上本屬性將被忽略。
onRequestCloseonRequestClose回調(diào)會(huì)在用戶按下 Android 設(shè)備上的后退按鍵或是 Apple TV 上的菜單鍵時(shí)觸發(fā)。請(qǐng)務(wù)必注意本屬性在 Android 平臺(tái)上為必填，且會(huì)在 modal 處于開啟狀態(tài)時(shí)阻止BackHandler事件。
onShowonShow回調(diào)函數(shù)會(huì)在 modal 顯示時(shí)調(diào)用。
transparenttransparent 屬性是指背景是否透明，默認(rèn)為白色，將這個(gè)屬性設(shè)為：true 的時(shí)候彈出一個(gè)透明背景層的modal。
animationTypeanimationType指定了 modal 的動(dòng)畫類型。[默認(rèn)值為none]

• slide 從底部滑入滑出。
• fade 淡入淡出。
• none 沒(méi)有動(dòng)畫，直接蹦出來(lái)。

hardwareAcceleratedhardwareAccelerated屬性決定是否強(qiáng)制啟用硬件加速來(lái)繪制彈出層。[只適用android]
onDismissonDismiss回調(diào)會(huì)在 modal 被關(guān)閉時(shí)調(diào)用。[只適用ios]
onOrientationChange模態(tài)窗顯示的時(shí)候，當(dāng)設(shè)備方向發(fā)生更改時(shí)，將調(diào)用onOrientationChange回調(diào)方法。 提供的設(shè)備方向僅為“豎屏”或“橫屏”。 無(wú)論當(dāng)前方向如何，也會(huì)在初始渲染時(shí)調(diào)用此回調(diào)方法[只適用ios]
presentationStylepresentationStyle決定 modal（在較大屏幕的設(shè)備比如 iPad 或是 Plus 機(jī)型）如何展現(xiàn)。[只適用ios]

• fullScreen完全蓋滿屏幕。
• pageSheet豎直方向幾乎蓋滿，水平居中，左右留出一定空白（僅用于大屏設(shè)備）。
• formSheet豎直和水平都居中，四周都留出一定空白（僅用于大屏設(shè)備）。
• overFullScreen完全蓋滿屏幕，同時(shí)允許透明。

默認(rèn)會(huì)根據(jù)transparent屬性而設(shè)置為overFullScreen或是fullScreen。
栗子：

import React, {Component} from "react";
import {Modal, Text, TouchableHighlight, View} from "react-native";

export default class ModalExample extends Component {
    state = {
        modalVisible: false
    };

    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }

    render() {
        return (
            <View style={{marginTop: 22}}>
                <Modal
                    animationType="slide"
                    transparent={false}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {
                        alert("Modal has been closed.");
                    }}
                >
                    <View style={{marginTop: 22}}>
                        <View>
                            <TouchableHighlight
                                onPress={() => {
                                    this.setModalVisible(!this.state.modalVisible);
                                }}
                            >
                                <Text>Hide Modal</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </Modal>

                <TouchableHighlight
                    onPress={() => {
                        this.setModalVisible(true);
                    }}
                >
                    <Text>Show Modal</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

9.RefreshControl組件：[用在ScrollView或FlatList內(nèi)部，為其添加下拉刷新的功能。]當(dāng)ScrollView處于豎直方向的起點(diǎn)位置（scrollY: 0），此時(shí)下拉會(huì)觸發(fā)一個(gè)onRefresh事件。
注意：refreshing是一個(gè)受控屬性， 所以必須在onRefresh函數(shù)中設(shè)置為true，否則loading指示器會(huì)立即停止。
屬性：
refreshing視圖是否應(yīng)該在刷新時(shí)顯示指示器。
onRefresh在視圖開始刷新時(shí)調(diào)用。
colors指定至少一種顏色用來(lái)繪制刷新指示器。[只適用android]
enabled指定是否要啟用刷新指示器。[只適用android]
progressBackgroundColor指定刷新指示器的背景色。[只適用android]
progressViewOffset指定刷新指示器的垂直起始位置(top offset)。[只適用android]
size指定刷新指示器的大小，具體數(shù)值可參閱RefreshControl.SIZE.[只適用android]
tintColor指定刷新指示器的顏色。[只適用ios]
title指定刷新指示器下顯示的文字。[只適用ios]
titleColor指定刷新指示器下顯示的文字的顏色。[只適用ios]
栗子：

import React, {Component} from "react";
import {ScrollView, RefreshControl} from "react-native";

export default class App extends Component {
    state = {
        modalVisible: false,
        isRefreshing: false,
    };

    _onRefresh() {
        this.setState({isRefreshing: true});
        setTimeout(() => {
            this.setState({isRefreshing: false});
        }, 2000)
    }

    render() {
        return (
            <ScrollView
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={this._onRefresh.bind(this)}
                        colors={['#ddd', '#0398ff']}
                        progressBackgroundColor="#ffffff"
                    />
                }
            />
        );
    }
}

10.SafeAreaView組件：[SafeAreaView的目的是在一個(gè)“安全”的可視區(qū)域內(nèi)渲染內(nèi)容。]SafeAreaView會(huì)自動(dòng)根據(jù)系統(tǒng)的各種導(dǎo)航欄、工具欄等預(yù)留出空間來(lái)渲染內(nèi)部?jī)?nèi)容。更重要的是，它還會(huì)考慮到設(shè)備屏幕的局限，比如屏幕四周的圓角或是頂部中間不可顯示的“劉?！眳^(qū)域。本組件目前僅支持 iOS 設(shè)備以及 iOS 11 或更高版本。
栗子：

SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
  <View style={{ flex: 1 }}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>

11.ScrollView組件：[滾動(dòng)視圖，同時(shí)還集成了觸摸鎖定的“響應(yīng)者”系統(tǒng)。]
記住ScrollView必須有一個(gè)確定的高度才能正常工作，因?yàn)樗鼘?shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個(gè)確定高度的容器（通過(guò)滾動(dòng)操作）。要給一個(gè)ScrollView確定一個(gè)高度的話，要么直接給它設(shè)置高度（不建議），要么確定所有的父容器都有確定的高度。一般來(lái)說(shuō)我們會(huì)給ScrollView設(shè)置flex: 1以使其自動(dòng)填充父容器的空余空間，但前提條件是所有的父容器本身也設(shè)置了flex或者指定了高度，否則就會(huì)導(dǎo)致無(wú)法正常滾動(dòng)。
ScrollView和FlatList應(yīng)該如何選擇？

• ScrollView會(huì)簡(jiǎn)單粗暴地把所有子元素一次性全部渲染出來(lái)。其原理淺顯易懂，使用上自然也最簡(jiǎn)單。然而這樣簡(jiǎn)單的渲染邏輯自然帶來(lái)了性能上的不足。
• FlatList會(huì)惰性渲染子元素，只在它們將要出現(xiàn)在屏幕中時(shí)開始渲染。這種惰性渲染邏輯要復(fù)雜很多。

屬性：

contentContainerStyle樣式會(huì)應(yīng)用到一個(gè)內(nèi)層的內(nèi)容容器上，并且所有的子視圖都會(huì)包裹在內(nèi)容容器樣式內(nèi)。

keyboardDismissMode用戶拖拽滾動(dòng)視圖的時(shí)候，是否要隱藏軟鍵盤。
【 跨平臺(tái)可用的值：
1. 'none' （默認(rèn)值），拖拽時(shí)不隱藏軟鍵盤。
2. 'on-drag'，當(dāng)拖拽開始的時(shí)候隱藏軟鍵盤。
僅iOS可用的值：
- 'interactive'，軟鍵盤伴隨拖拽操作同步地消失，并且如果往上滑動(dòng)會(huì)恢復(fù)鍵盤。安卓設(shè)備上不支持這個(gè)選項(xiàng)，會(huì)表現(xiàn)的和none一樣。】

keyboardShouldPersistTaps如果當(dāng)前界面有軟鍵盤，那么點(diǎn)擊scrollview后是否收起鍵盤，取決于本屬性的設(shè)置。（譯注：很多人反應(yīng)TextInput無(wú)法自動(dòng)失去焦點(diǎn)/需要點(diǎn)擊多次切換到其他組件等等問(wèn)題，其關(guān)鍵都是需要將TextInput放到ScrollView中再設(shè)置本屬性）

• 'never' （默認(rèn)值），點(diǎn)擊TextInput以外的子組件會(huì)使當(dāng)前的軟鍵盤收起。此時(shí)子元素不會(huì)收到點(diǎn)擊事件。
• 'always'，鍵盤不會(huì)自動(dòng)收起，ScrollView也不會(huì)捕捉點(diǎn)擊事件，但子組件可以捕獲。
• 'handled'，當(dāng)點(diǎn)擊事件被子組件捕獲時(shí)，鍵盤不會(huì)自動(dòng)收起。這樣切換TextInput時(shí)鍵盤可以保持狀態(tài)。多數(shù)帶有TextInput的情況下你應(yīng)該選擇此項(xiàng)。
• false，已過(guò)期，請(qǐng)使用'never'代替。
• true，已過(guò)期，請(qǐng)使用'always'代替。

onContentSizeChange此函數(shù)會(huì)在ScrollView內(nèi)部可滾動(dòng)內(nèi)容的視圖發(fā)生變化時(shí)調(diào)用。
onMomentumScrollBegin滾動(dòng)動(dòng)畫開始時(shí)調(diào)用此函數(shù)。
onMomentumScrollEnd滾動(dòng)動(dòng)畫結(jié)束時(shí)調(diào)用此函數(shù)。
onScroll在滾動(dòng)的過(guò)程中，每幀最多調(diào)用一次此回調(diào)函數(shù)。調(diào)用的頻率可以用scrollEventThrottle屬性來(lái)控制。
onScrollBeginDrag當(dāng)用戶開始拖動(dòng)此視圖時(shí)調(diào)用此函數(shù)。
onScrollEndDrag當(dāng)用戶停止拖動(dòng)此視圖時(shí)調(diào)用此函數(shù)。
pagingEnabled當(dāng)值為true時(shí)，滾動(dòng)條會(huì)停在滾動(dòng)視圖的尺寸的整數(shù)倍位置。這個(gè)可以用在水平分頁(yè)上。默認(rèn)值為false。
注意：垂直分頁(yè)在Android上不支持。
refreshControl指定RefreshControl組件，用于為ScrollView提供下拉刷新功能。只能用于垂直視圖，即horizontal不能為true。
removeClippedSubviews當(dāng)此屬性為true時(shí)，屏幕之外的子視圖（子視圖的overflow樣式需要設(shè)為hidden）會(huì)被移除。這個(gè)可以提升大列表的滾動(dòng)性能。默認(rèn)值為true。
scrollEnabled當(dāng)值為false的時(shí)候，內(nèi)容不能滾動(dòng)，默認(rèn)值為true。
showsHorizontalScrollIndicator當(dāng)此屬性為true的時(shí)候，顯示一個(gè)水平方向的滾動(dòng)條。
showsVerticalScrollIndicator當(dāng)此屬性為true的時(shí)候，顯示一個(gè)垂直方向的滾動(dòng)條。
stickyHeaderIndices一個(gè)子視圖下標(biāo)的數(shù)組，用于決定哪些成員會(huì)在滾動(dòng)之后固定在屏幕頂端。舉個(gè)例子，傳遞stickyHeaderIndices={[0]}會(huì)讓第一個(gè)成員固定在滾動(dòng)視圖頂端。這個(gè)屬性不能和horizontal={true}一起使用。
horizontal當(dāng)此屬性為true的時(shí)候，所有的子視圖會(huì)在水平方向上排成一行，而不是默認(rèn)的在垂直方向上排成一列。默認(rèn)值為false。
decelerationRate
snapToAlignment當(dāng)設(shè)置了snapToInterval，snapToAlignment會(huì)定義停駐點(diǎn)與滾動(dòng)視圖之間的關(guān)系。

• 'start' (默認(rèn)) 會(huì)將停駐點(diǎn)對(duì)齊在左側(cè)（水平）或頂部（垂直）
• 'center' 會(huì)將停駐點(diǎn)對(duì)齊到中間
• 'end' 會(huì)將停駐點(diǎn)對(duì)齊到右側(cè)（水平）或底部（垂直）
  snapToInterval當(dāng)設(shè)置了此屬性時(shí)，會(huì)讓滾動(dòng)視圖滾動(dòng)停止后，停止在snapToInterval的倍數(shù)的位置。這可以在一些子視圖比滾動(dòng)視圖本身小的時(shí)候用于實(shí)現(xiàn)分頁(yè)顯示。需要與snapToAlignment組合使用。
  以下針對(duì)平臺(tái)android：
  endFillColor有時(shí)候滾動(dòng)視圖會(huì)占據(jù)比實(shí)際內(nèi)容更多的空間。這種情況下可以使用此屬性，指定以某種顏色來(lái)填充多余的空間，以避免設(shè)置背景和創(chuàng)建不必要的繪制開銷。一般情況下并不需要這種高級(jí)優(yōu)化技巧。
  overScrollMode覆蓋默認(rèn)的overScroll模式
  可選的值有：
• 'auto' - 默認(rèn)值，允許用戶在內(nèi)容超出視圖高度之后可以滾動(dòng)視圖。
• 'always' - 無(wú)論內(nèi)容尺寸，用戶始終可以滾動(dòng)視圖。
• 'never' - 始終不允許用戶滾動(dòng)視圖。
  nestedScrollEnabled在Android API level 21（5.0）以上啟用嵌套滾動(dòng)。iOS上默認(rèn)支持嵌套滾動(dòng)。
  以下針對(duì)平臺(tái)ios:
  alwaysBounceHorizontal當(dāng)此屬性為true時(shí)，水平方向即使內(nèi)容比滾動(dòng)視圖本身還要小，也可以彈性地拉動(dòng)一截。當(dāng)horizontal={true}時(shí)默認(rèn)值為true，否則為false。
  automaticallyAdjustContentInsets當(dāng)滾動(dòng)視圖放在一個(gè)導(dǎo)航條或者工具條后面的時(shí)候，iOS系統(tǒng)是否要自動(dòng)調(diào)整內(nèi)容的范圍。默認(rèn)值為true。（譯注：如果你的ScrollView或FlatList的頭部出現(xiàn)莫名其妙的空白，嘗試將此屬性置為false）
  bounces當(dāng)值為true時(shí)，如果內(nèi)容范圍比滾動(dòng)視圖本身大，在到達(dá)內(nèi)容末尾的時(shí)候，可以彈性地拉動(dòng)一截。如果為false，尾部的所有彈性都會(huì)被禁用，即使alwaysBounce屬性為true。默認(rèn)值為true。
  bouncesZoom當(dāng)值為true時(shí)，使用手勢(shì)縮放內(nèi)容可以超過(guò)min/max的限制，然后在手指抬起之后彈回min/max的縮放比例。否則的話，縮放不能超過(guò)限制。
  canCancelContentTouches當(dāng)值為false時(shí)，一旦有子節(jié)點(diǎn)響應(yīng)觸摸操作，即使手指開始移動(dòng)也不會(huì)拖動(dòng)滾動(dòng)視圖。默認(rèn)值為true（在以上情況下可以拖動(dòng)滾動(dòng)視圖）。
  centerContent當(dāng)值為true時(shí)，如果滾動(dòng)視圖的內(nèi)容比視圖本身小，則會(huì)自動(dòng)把內(nèi)容居中放置。當(dāng)內(nèi)容比滾動(dòng)視圖大的時(shí)候，此屬性沒(méi)有作用。默認(rèn)值為false。
  contentInset內(nèi)容范圍相對(duì)滾動(dòng)視圖邊緣的坐標(biāo)。默認(rèn)為{top: 0, left: 0, bottom: 0, right: 0}。
  contentInsetAdjustmentBehavior
contentOffset用來(lái)手動(dòng)設(shè)置初始的滾動(dòng)坐標(biāo)。默認(rèn)值為{x: 0, y: 0}。
  directionalLockEnabled當(dāng)值為真時(shí)，滾動(dòng)視圖在拖拽的時(shí)候會(huì)鎖定只有垂直或水平方向可以滾動(dòng)。默認(rèn)值為false
  indicatorStyle設(shè)置滾動(dòng)條的樣式。
  maximumZoomScale允許的最大縮放比例。默認(rèn)值為1.0。
  minimumZoomScale允許的最小縮放比例。默認(rèn)值為1.0。
  pinchGestureEnabled設(shè)置為true時(shí)，ScrollView會(huì)允許用戶使用雙指縮放操作。默認(rèn)值為true。
  scrollEventThrottle這個(gè)屬性控制在滾動(dòng)過(guò)程中，scroll事件被調(diào)用的頻率（單位是每秒事件數(shù)量）。更小的數(shù)值能夠更及時(shí)的跟蹤滾動(dòng)位置，不過(guò)可能會(huì)帶來(lái)性能問(wèn)題，因?yàn)楦嗟男畔?huì)通過(guò)bridge傳遞。由于JS事件循環(huán)需要和屏幕刷新率同步，因此設(shè)置1-16之間的數(shù)值不會(huì)有實(shí)質(zhì)區(qū)別。默認(rèn)值為0，意味著每次視圖被滾動(dòng)，scroll事件只會(huì)被調(diào)用一次。
  scrollIndicatorInsets決定滾動(dòng)條距離視圖邊緣的坐標(biāo)。這個(gè)值應(yīng)該和contentInset一樣。默認(rèn)值為{0, 0, 0, 0}。
  scrollsToTop當(dāng)此值為true時(shí)，點(diǎn)擊狀態(tài)欄的時(shí)候視圖會(huì)滾動(dòng)到頂部。默認(rèn)值為true。
  zoomScale
alwaysBounceVertical
  方法：
• scrollTo() 用法：scrollTo(([y]: number), object, ([x]: number), ([animated]: boolean));滾動(dòng)到指定的x, y偏移處。第三個(gè)參數(shù)為是否啟用平滑滾動(dòng)動(dòng)畫。
  比如：scrollTo({x: 0, y: 0, animated: true})
• scrollToEnd() 用法：scrollToEnd(([options]: object));滾動(dòng)到視圖底部（水平方向的視圖則滾動(dòng)到最右邊）。
  加上動(dòng)畫參數(shù)scrollToEnd({animated: true})則啟用平滑滾動(dòng)動(dòng)畫，或是調(diào)用scrollToEnd({animated: false})來(lái)立即跳轉(zhuǎn)。如果不使用參數(shù)，則animated選項(xiàng)默認(rèn)啟用。

12.StatusBar組件：[控制應(yīng)用狀態(tài)欄的組件。]
屬性：
animated指定狀態(tài)欄的變化是否應(yīng)以動(dòng)畫形式呈現(xiàn)。目前支持這幾種樣式：backgroundColor, barStyle和hidden。
barStyle設(shè)置狀態(tài)欄文本的顏色。
hidden是否隱藏狀態(tài)欄。
[只適用于android]
backgroundColor狀態(tài)欄的背景色。
translucent指定狀態(tài)欄是否透明。設(shè)置為true時(shí)，應(yīng)用會(huì)延伸到狀態(tài)欄之下繪制（即所謂“沉浸式”——被狀態(tài)欄遮住一部分）。常和帶有半透明背景色的狀態(tài)欄搭配使用。
[只適用ios]
networkActivityIndicatorVisible指定是否顯示網(wǎng)絡(luò)活動(dòng)提示符。
showHideTransition通過(guò)hidden屬性來(lái)顯示或隱藏狀態(tài)欄時(shí)所使用的動(dòng)畫效果。默認(rèn)值為'fade'。
方法：

• setHidden()
  用法：static setHidden(hidden: boolean, [animation]: StatusBarAnimation)
• setBarStyle()
  用法：static setBarStyle(style: StatusBarStyle, [animated]: boolean)
• setNetworkActivityIndicatorVisible()
  用法：static setNetworkActivityIndicatorVisible(visible: boolean)
• setBackgroundColor()
  用法：static setBackgroundColor(color: string, [animated]: boolean)
• setTranslucent()
  用法：static setTranslucent(translucent: boolean)
  栗子：

    <StatusBar animated={true} barStyle='dark-content' hidden={true}/>