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 沒有動(dòng)畫废麻，直接蹦出來荠卷。

hardwareAcceleratedhardwareAccelerated屬性決定是否強(qiáng)制啟用硬件加速來繪制彈出層。[只適用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指定至少一種顏色用來繪制刷新指示器膝蜈。[只適用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ù)留出空間來渲染內(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è)確定高度的容器（通過滾動(dòng)操作）捡需。要給一個(gè)ScrollView確定一個(gè)高度的話办桨，要么直接給它設(shè)置高度（不建議），要么確定所有的父容器都有確定的高度站辉。一般來說我們會(huì)給ScrollView設(shè)置flex: 1以使其自動(dòng)填充父容器的空余空間崔挖，但前提條件是所有的父容器本身也設(shè)置了flex或者指定了高度，否則就會(huì)導(dǎo)致無(wú)法正常滾動(dòng)庵寞。
ScrollView和FlatList應(yīng)該如何選擇狸相？

• ScrollView會(huì)簡(jiǎn)單粗暴地把所有子元素一次性全部渲染出來。其原理淺顯易懂捐川，使用上自然也最簡(jiǎn)單脓鹃。然而這樣簡(jiǎn)單的渲染邏輯自然帶來了性能上的不足。
• 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)擊多次切換到其他組件等等問題吧碾，其關(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，已過期问麸，請(qǐng)使用'never'代替往衷。
• true，已過期严卖，請(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)的過程中，每幀最多調(diào)用一次此回調(diào)函數(shù)稠肘。調(diào)用的頻率可以用scrollEventThrottle屬性來控制福铅。
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)容更多的空間钉赁。這種情況下可以使用此屬性蹄殃，指定以某種顏色來填充多余的空間，以避免設(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)容可以超過min/max的限制秧荆，然后在手指抬起之后彈回min/max的縮放比例。否則的話埃仪，縮放不能超過限制乙濒。
  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í)候葡缰，此屬性沒有作用亏掀。默認(rèn)值為false。
  contentInset內(nèi)容范圍相對(duì)滾動(dòng)視圖邊緣的坐標(biāo)泛释。默認(rèn)為{top: 0, left: 0, bottom: 0, right: 0}滤愕。
  contentInsetAdjustmentBehavior
contentOffset用來手動(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)過程中，scroll事件被調(diào)用的頻率（單位是每秒事件數(shù)量）。更小的數(shù)值能夠更及時(shí)的跟蹤滾動(dòng)位置萝嘁，不過可能會(huì)帶來性能問題梆掸，因?yàn)楦嗟男畔?huì)通過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})來立即跳轉(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通過hidden屬性來顯示或隱藏狀態(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}/>