1 IOS組件

1.1 iOS活動指示器

1.1.1 Props

animating?bool型 顯示指示器(true，默認的)還是隱藏它(false)；

color字符串型；

Spinner的前景顏色(默認為灰色)；

size枚舉型(“小”，“大”)指示器的大小。小的高度為20，大的高度為36。

1.2 iOS日期選擇器

????????使用DatePickerIOS來在iOS上呈現一個日期/時間選擇器(selector)。這是一個控制組件，所以為了組件更 新，你必須鉤在onDateChange回調中，并更新date支持，否則用戶的變化將立即恢復以反映props.date。

1.2.1 Props

????date日期型??

????????當前選中的日期。

????maximumDate日期型

????????最大的日期。限制可能的日期/時間值的范圍。

????minimumDate日期型

????????最小的日期。限制了可能的日期/時間值的范圍。

????minuteInterval枚舉型(1,2,3,4,5,6,10,12,15,20,30)

????????可選擇的分鐘的間隔。

????mode枚舉型(“date”,“time”,“datetime”)

????????日期選擇器模式。

????onDateChange函數型

????????日期變更處理程序。

????????當用戶更改了UI的日期或時間時，它就會被調用。第一個也是唯一一個參數是一個Date對象，代表了新的日期和時間。

? ? timeZoneOffsetInMinutes數字型

????????在幾分鐘內時區偏移。

????????默認情況下，日期選擇器將使用設備的時區。有了這個參數，才有可能迫使某個時區偏移。例如，為了顯示太平 洋的標準時間，傳遞-7 * 60。

1.3 iOS導航器

????????iOS導航器包裝了UIKit導航，并且允許你添加跨應用程序的back-swipe功能。

1.3.1 路線

????????路線是用于描述導航器每個頁面的一個對象。第一個提供給NavigatorIOS的路線是initialRoute :

render: function() {

? return (

????<NavigatorIOS

????? initialRoute={{

??????? component:MyView,

??????? title: 'MyView Title',

??????? passProps: {myProp: 'foo' },

? ? ? }}

????/>

? );

},

????????現在將由導航器呈現MyView。它將在route道具，導航器及所有的passProps指定的道具中接受一個路線對象。

????????路線完整的定義請看initialRoute propType。

1.3.2 導航器

????????Navigator是視圖能夠調用的導航函數的一個對象。它作為一個道具會被傳遞給任何由NavigatorIOS呈現的組件。

var MyView = React.createClass({

? ? _handleBackButtonPress: function() {

? ? ????this.props.navigator.pop();

? ? },

? ? _handleNextButtonPress: function() {

???????this.props.navigator.push(nextRoute);

????},

????...?

});

????????一個導航對象包含以下功能:

????? push(route)

????——導航到一個新的路線

????? pop()

????——返回一個頁面

????? popN(n)

????——一次返回N頁。當N=1時，該行為相當于pop()

????? replace(route)

????——取代當前頁面的路線，并立即為新路線加載視圖

????? replacePrevious(route)

????——取代前一頁的路線/視圖

????? replacePreviousAndPop(route)

????——取代了以前的路線/視圖并轉換回去

????? resetTo(route)

????——取代頂級的項目并popToTop

????? popToRoute(route)

????——為特定的路線對象回到項目

????? popToTop()

????——回到頂級項目

????????導航功能在NavigatorIOS組件中也是可用的:

?var MyView =React.createClass({

? ? ?_handleNavigationRequest: function() {

? ? ?????this.refs.nav.push(otherRoute);

? ? ?},

? ? ?render: () => (

????????<NavigatorIOS ref="nav"

? ? ? ? ? ? initialRoute={...}

? ? ? ? />

????),

});

1.3.3 Props

????????initialRoute{組件:函數型，標題:字符串型，passProps:對象型，backButtonTitle:字符串型，rightButt onTitle:字符串型，onRightButtonPress:函數型，wrapperStyle:[對象型Object]}

????????NavigatorIOS使用“路線”對象來識別子視圖，道具，及導航欄的配置。“push”和所有其他的導航操作預計路 線是這樣的:

????itemWrapperStyle View#style

????????默認的包為navigator中的組件設置樣式。一個常見的用例是為每一頁設置backgroundColor

????tintColor字符串型在導航欄中的按鈕使用的顏色

1.4 iOS選擇器

1.4.1 Props

onValueChange 函數型

selectedValue 任意類型

1.5 iOS滑塊

1.5.1 屬性

????maximumValue 數值型

????????滑動塊初始化最大值。默認值是1。

????minimumValue數值型

????????滑動塊初始化最小值。默認值是0。

????onSlidingComplete函數

????????當用戶已經完成改變它的值后，調用回調函數(例如，當滑動塊被釋放)

????onValueChange函數

????????當用戶拖動滑動塊時，連續不斷的調用回調函數

1.5.2 styleView#style

????????用于對Slider的設計與布局。未獲取更多的信息，請查看StyleSheet.js和ViewStylePropTypes.js

????value數值型

????????初始化滑動塊的值。該值應該是介于最大值和最小值之間的，最大值默認為1，最小值默認為0。默認值為0。 這不是一個控制組件，比如說，如果你不更新組件的值，那么它將不會被重置成它的初始值。

1.6 iOS開關

????????使用SwitchIOS在iOS上呈現出布爾型的輸入。這是一個控件組件，所以為了更新組件，你必須使用Change回調并且更新值value。否則的話用戶的改變會被立即反映到props.value，這是一個真理。

1.6.1 屬性

????disabled布爾型

????????如果值為真，那么用戶將不能切換開關。默認值為假。

????onTintColor字符串型

????????當開關打開時候的背景顏色。

????onValueChange函數

????????當用戶切換開關時，調用回調函數。

????thumbTintColor字符串型

????????開關按鈕的背景顏色。

????tintColor字符串型

????????當開關關閉后的背景顏色。

????value布爾型

????????開關的值，如果為真，開關會打開。默認值為假。

1.7 iOS選項卡

1.7.1 屬性

1.7.2 styleView#style

1.8 TabBarIOS.Item

????badge

????????位于圖標右上角的小的紅色的泡沫。

????icon Image.propTypes.source

????????標記的自動以圖標。當定義了系統圖標時，它將被忽略。

????onPress函數

????????當標記被選中時，該函數回調，你應該改變組件的狀態來設置selected={true}。

????selected布爾值

????????它指定了孩子是否可見。如果你看到了一個空白的內容，你很有可能是忘記添加選中項了。

????selectedIcon Image.propTypes.source

????????當標記被選中時，自定義的圖標。當定義了系統圖標時，它會被忽略。如果為空，那么圖標會呈現藍色。

1.8.1 styleView#style

????????React樣式對象。

systemIcon枚舉('bookmarks' 'contacts' 'downloads'，'favorites'，'featured'，'history'，'more'，'most-recent'，'most-viewed'，'recents'，'search'，'top-rated')

????????項目有一些預定義的系統圖標。請注意如果你正在使用它們，標題和選中的圖標將被系統圖標覆蓋。

????title字符串

????????出現在圖標下的文本。當定義了系統圖標時，它會被忽略。

1.9 嵌套文本

????????在iOS里，顯示格式化文本的方式是使用NSAttributedString :你可以為你想要顯示和注釋的文本劃定一些特 定的格式范圍。實際上，這是非常無聊的。對于React Native，我們決定使用Web模式，在這里我們可以利用 嵌套文本來達到同樣的效果。

<Text style={{fontWeight: 'bold'}} >

? ?I am bold

????<Text style={{color: 'red'}}>??

????and red

????</Text>

</Text>

????????在幕后，這將會被轉換成一個完全的包含以下信息的NSAttributedString

???? "I am bold and red"

???? 0-9: bold

???? 9-17: bold, red

1.10 iOS警告

????????利用一個特定的標題和消息來啟動一個警告對話框。

????????提供一個可選按鈕的列表。點擊任何按鈕觸發各自的按下回調動作，并且忽略警告。在默認情況下，只有一個按 鈕是“OK”按鈕。列表中最后一個按鈕被視為“主”按鈕，它被用粗體顯示出來了。

AlertIOS.alert(

? 'Foo Title',

? 'My Alert Msg',

? [

??? {text: 'Foo',onPress: () => console.log('Foo Pressed!')},

??? {text: 'Bar',onPress: () => console.log('Bar Pressed!')},

? ]

)}

1.10.1 方法

static alert(title: string, message?: string, buttons?:Array<{ text: ?string; onPress: ?Function; }>)

2 Android組件

2.1 DrawerLayoutAndroid

????????React組件封裝平臺DrawerLayout(僅適用于Android)。Drawer(通常用于導航)呈現renderNavigationView渲染導航視圖和直接子級，是呈現(您的內容)的主要視圖。導航視圖是最初在屏幕上不可見的，但可以從由drawerPosition指定的窗口的側面拉出，其寬度可通過drawerWidth設置。

2.2 ProgressBarAndroid

????????React組建包裹了只是Android部分的ProgressBar。這個組件是被用來提示這個應用正在加載或者在應用里 面有一些操作。

例子:

render: function() {

? var progressBar =

????<View style={styles.container}>

? ? ????<ProgressBar styleAttr="Inverse" />

????</View>;

? return (

????<MyLoadingComponent componentView={componentView}

?????????loadingView={progressBar}

?????????style={styles.loadingComponent}

????? /> );

},

2.2.1 屬性

????????styleAttr樣式屬性 進度條的樣式，包括:

????? Horizontal

????? Small

????? Large

????? Inverse????

????? SmallInverse

????? LargeInverse

????????testID字符串 在端對端測試里面被用來定位這個視圖。

2.3 SwitchAndroid

????????標準的Android雙態切換組件屬性

disable bool

????????如果為true，則該組件不能進行交互。onValueChange function當值發生變化時調用新的值。

testID string

????????用于在端到端測試中查找此視圖。

value bool

????????開關的布爾值。

2.4 ToolbarAndroid

????????React組件，包裝了Android Toolbar小工具。工具欄可以顯示一個標志，導航圖標(如漢堡包菜單)，標題 和副標題和操作列表。標題和子標題被擴展這樣以來標志和導航圖標顯示在左邊，標題和副標題在中間并且操作 在右邊。

????????如果工具欄具有唯一子級，它將顯示在標題和操作之間。

例子:

render: function() {

? return (

????<ToolbarAndroid logo={require('image!app_logo')} title="AwesomeApp"

?????????actions={[{title: 'Settings', icon: require('image!icon_settings') show: 'always'}]}

????? ????onActionSelected={this.onActionSelected}/>

? )?

},

onActionSelected: function(position) {

? if (position === 0){?

????// index of 'Settings'

? }

}

2.4.1 屬性

actions [{title: string, icon: Image.propTypes.source, show:enum('always', 'ifRoom', 'never'), sho wWithText: bool}]

????????將工具欄上的可能動作設置為動作菜單的一部分。這些都顯示為圖標或小部件右側的文本。如果不適合，它們將 被放置在一個'溢出'菜單。

????????此屬性需要一個對象數組，其中每個對象具有以下鍵:

????? title :必要的,這個操作的標題

????? icon :這個操作的圖標，例如:require('image!some_icon')

????? show :當把這個操作顯示為一個圖標或隱藏在溢出菜單中時:always , ifRoom或never

????? showWithText :布爾值，是否顯示圖標旁邊的文本

????logo Image.propTypes.source

????????設置工具欄的標志。

????navIcon Image.propTypes.source

????????設置導航圖標。

????onActionSelected function

????????被選中時調用回調函數。傳遞到回調的唯一參數是操作數組中的位置。

????onIconClicked function

????????在選定圖標時調用。

????subtitle string

????????設置工具欄副標題。

????subtitleColor string

????????設置工具欄副標題的顏色。

????testID string

????????用于在端到端測試中查找此視圖。

????title string

????????設置工具欄標題。

????titleColor string

????????設置工具欄副標題的顏色。

2.5 ToastAndroid

????????它揭示了如何將本地ToastAndroid模塊作為一個JS模塊。它有一個名為showText的函數，其擁有的參數如下所示:

????1.字符串消息:將文本傳遞給toast的字符串

????2. int持續期:toast的持續期。可能是ToastAndroid.SHORT或ToastAndroid.LONG

方法

static show(message: string, duration: number)

性質

SHORT: MemberExpression

LONG: MemberExpression

3 公共組件

3.1 列表視圖

????????列表視圖——為變化的數據列表的垂直滾動的高效顯示而設計的一個核心組件。最小的API是創建一個ListView.DataSource，用一個簡單的數組數據的blob填充，并用那個數據源實例化一個ListView組件和一個renderRow回調，它會從數組數據中帶走一個blob并返回一個可渲染的組件。

????????最小的例子:

getInitialState: function() {

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

? return {

??? dataSource: ds.cloneWithRows(['row 1', 'row 2']),

? };

},

render: function() {

? return (

????<ListView dataSource={this.state.dataSource}

????? renderRow={(rowData) => <Text>{rowData}}</Text>

??? />

); },

????????列表視圖還支持更高級的功能，包括帶有sticky頁眉的部分，頁眉和頁腳的支持，回調到可用數據的最后()和設備窗口變化中可見的行集(onChangeVisibleRows)，以及一些性能優化。

????????當動態加載一些可能非常大(或概念上無限大的)數據集時，為了讓列表視圖滾送的順暢，有一些性能操作設計:

????? 只有重新呈現改變行——提供給數據源的hasRowChanged函數告訴列表視圖是否需要重新呈現一行，因為源數據發生了變化——更多細節請看ListViewDataSource。

????? 行限速呈現——默認情況下，每次事件循環時，只顯示一行(可用pageSize道具定制)。這將工作分解為小塊，在呈現行時，減少框架下降的機會。

3.1.1 Props

ScrollView props...

dataSource 列表視圖數據源

initialListSize 數字型

????????多少行呈現在初始組件裝置中。使用這個來實現，這樣第一個屏幕需要的數據就會一次出現，而不是在多個框架的過程中出現。

onChangeVisibleRows函數型

????????(visibleRows, changedRows) => void 當可見的行集改變時調用。visibleRows為所有可見的行映射{sectionID: {rowID: true }}，changedRows為已經改變了它們可見性的行映射{sectionID: {rowID: true |false }}，true表明行可見，而false表明行已經從視圖中被刪除了。

onEndReached函數型

????????當所有行已經呈現并且列表被滾動到了onEndReachedThreshold的底部時被調用。提供了native滾動事件。

onEndReachedThreshold 數字型

onEndReached 像素的閾值。

pageSize數字型

????????每次事件循環顯示的行的數量。

removeClippedSubviews 布爾型

????????為提高大型列表滾動性能的實驗性能優化，與溢出一起使用:“隱藏”在行容器中。使用時自己承擔風險。

renderFooter函數型

????????() => renderable 頁眉和頁腳在每個呈現過程中都會出現(如果提供了這些道具)。如果重新呈現它們耗費很大，那就把它們包在StaticContainer或其他適當的機制中。在每一個呈現過程中，頁腳始終是在列表的底部，頁眉始終在列表的頂 部。

renderHeader函數型renderRow函數型

????????(rowData, sectionID, rowID) => renderable需要從數據源和它的id取走一個數據條目，并返回一個可渲染 的作為行呈現的組件。默認的情況下，數據正是被放入了數據源的東西，但也可以提供自定義的提取器。

renderSectionHeader函數型

????????(sectionData, sectionID) => renderable 如果提供了該函數，那么本節的sticky頁眉就會呈現。Sticky行為意味著它將帶著本節頂部的內容滾動，直到 它到達屏幕的頂端，此時它會停在屏幕頂部，直到被下一節的頁眉推掉。

scrollRenderAheadDistance數字型

????????在它們以像素的形式出現在屏幕上之前，要多早就開始呈現行。

3.2 Map視圖

3.2.1 Props

????????legalLabelInsets {頂部:數字型;左部:數字型;底部:數字型;右部:數字型}

????????為map嵌入合法的標簽，最初是在map的左下角。更多信息請看EdgeInsetsPropType.js。

????maxDelta數字型

????????能夠顯示的區域的最大尺寸。

????minDelta數字型

????????能夠顯示的區域的最小尺寸。

????onRegionChange函數型

????????當用戶拖動map時，會不斷地調用回調函數。

????onRegionChangeComplete函數型

????????當用戶完成移動map時，調用一次回調函數。

????pitchEnabled布爾型

????????當這個屬性設置為true，且有效的相機與map相關聯，那么相機的螺旋角用于傾斜map的平面。當這個屬性 設置為false時，相機的螺旋角被忽略，并且map上總是顯示為好像用戶直接向下看。

????region {緯度:數字型，經度:數字型，latitudeDelta:數字型，longitudeDelta:數字型}

????????該地區會被map顯示出來。由中心坐標和坐標跨度定義的區域顯示出來。

????rotateEnabled布爾型

????????當這個屬性設置為true，且有效的相機與map相關聯，那么相機的航向角用于圍繞map中心點旋轉map平 面。當該屬性設置為false時，相機的航向角被忽略，map總是定向的，這樣真正的北方就會位于map視圖的 頂部。

????scrollEnabled布爾型

????????如果是false，用戶無法更改map顯示的區域。默認值是true。

????showsUserLocation布爾型

????????如果是true，應用程序會請求用戶的位置并關注它。默認值是false。

????????注意:為了獲取地理位置，你需要添加把NSLocationWhenInUseUsageDescription鍵添加到info.plist，否則 就會失敗!

????style View#style

????????用于MapView的樣式設置和布局。更多信息請看StyleSheet.js和ViewStylePropTypes.js。

????zoomEnabled布爾型

????????如果是false，用戶無法縮小/放大map。默認值是true。

3.3 導航器

????????在你的應用程序中使用Navigator來在不同場景之間過渡。為了實現這一功能，為導航器提供了路由對象來識 別每一個場景，還提供了一個renderScene函數，導航器可以用它來為給定的路線渲染場景。

????????為了改變場景的動畫或動作屬性，提供了一個configureScene道具來為給定的路由配置對象。看到導航器。默 認動畫及更多的關于場景配置選項的信息，請看Navigator.SceneConfigs。

3.3.1 基本的使用

<Navigator

???initialRoute = {{name: 'My First Scene', index: 0}}

???renderScene={(route, navigator) =>

????????<MySceneComponent

???????????name={route.name}

??????????? onForward={()=> {

? ? ? ? ? ? ? ? var nextIndex = route.index + 1;

? ? ? ? ? ? ? ? navigator.push({

??????????? ????????name: 'Scene ' + nextIndex,

??????????? ????????index: nextIndex,

? ? ? ? ? ? ? ? });

??????? ????}}

??????? ????onBack={()=> {

? ? ? ? ? ? ? ? if(route.index > 0) {

???????????????????navigator.pop();

????????????????}

????????????}}

????????/> }

/>

3.3.2 導航方法

????????Navigator有兩種方式進行導航。如果你有一個參考元素，你可以調用一些方法來觸發導航:

????? jumpBack()

????????——在不需要卸載當前場景的情況下向后跳

????? jumpForward()

????????——向前跳轉到路線堆棧中的下一個場景

????? jumpTo(route)?

????????——過渡到一個現有的沒有被卸載的場景

????? push(route)

????????——導航到一個新的場景，擠壓任何你能夠jumpForward的場景

????? pop()

????????——回歸并卸載當前場景

????? replace(route)

????????——用一個新路線替換當前場景

????? replaceAtIndex(route, index)

????????——取代一個由索引指定的場景

????? replacePrevious(route)

????????——取代之前的場景

????? immediatelyResetRouteStack(routeStack)

????????——用一組路線重置每個場景

????? popToRoute(route)

????????——彈出一個由它的路線指定的特定的場景。這之后所有的場景將被卸載

????? popToTop()

????????——彈出堆棧中的第一個場景，卸載其他場景

3.3.3 導航器對象

????????通過renderScene函數navigator對象對場景是可用的。對象有所有的導航方法，以及一些實用程序:

????? parentNavigator

????????——父導航對象的參考，在props.navigator中被傳遞

????? onWillFocus

????????——用來向父導航器傳遞一個導航焦點事件

????? onDidFocus

????????——用來向父導航器傳遞一個導航焦點事件

3.3.4 Props

????configureScene函數型?

????????可選功能，允許配置場景動畫和手勢。將由路線調用，且應該返回一個場景配置對象

(route) => Navigator.SceneConfigs.FloatFromRight

initialRoute對象型

????????提供一個單一的“路線”來開始。路線是一個任意的對象，導航器將使用它在場景呈現之前確定每個場景。initialRoute或initialRouteStack是必需的。

initialRouteStack [對象型]

????????提供一組路線來呈現最初的場景。如果沒有提供initialRoute，那么該道具就會被需求。

navigationBar節點型

????????以可選的方式提供一個能夠存留在場景之間轉換的導航欄

navigator對象型

????????以可選的方式從父導航器提供navigator對象

onDidFocus函數型

????????在場景過渡完成后或在最初安裝后該函數會被每個場景的新路線調用。這將覆蓋在this.props.navigator的onD idFocus處理程序上。

onItemRef函數型

????????當場景參考發生變化時，該函數會被調用(ref，indexInStack)

onWillFocus函數型

????????將在安裝中和每個導航轉換之前發射目標路線，覆蓋this.props.navigator中的處理程序。這將覆蓋this.prop s.navigator中的onDidFocus處理程序

renderScene函數型

????????對于一個給定的路線哪一個場景會出現需要該函數。將由路線和navigator對象調用。

?(route, navigator)=> <MySceneComponent title={route.title} />

sceneStyle View#style

????????設置樣式，以應用于每個場景的容器中。

3.4 滾動視圖

????????組件封裝了滾動視圖平臺，同時提供了與鎖定“應答”系統的觸摸的集成。尚不支持其他來自阻止滾動視圖成為響應者的包含的響應。

3.4.1 Props

alwaysBounceHorizontal 布爾型

????????當為真時，滾動視圖到達內容底部時，水平反彈，即使該內容小于滾動視圖。當horizontal={true}時，默認值 為true，否則，默認值為false。

alwaysBounceVertical 布爾型

????????當為真時，滾動視圖到達內容底部時，垂直反彈，即使該內容小于滾動視圖。當horizontal={true}時，默認值 為false，否則，默認值為true。

automaticallyAdjustContentInsets 布爾型

bounces 布爾型

????????當為真時，當滾動視圖到達內容底部時，反彈，如果內容比滾動視圖是大，那么滾動視圖沿著軸滾動方向反 彈。當為假時，禁用所有反彈，即使alwaysBounce *道具為真。默認值為true。

centerContent bool布爾型

????????當為真時，當內容小于滾動視圖邊界時，滾動視圖自動的集中內容;當內容大于滾動視圖時,該屬性沒有任何影 響。默認值是false。

contentContainerStyle StyleSheetPropType(ViewStylePropTypes)

????????這些樣式將應用到滾動視圖內容容器中，內容容器包裝了所有的子視圖。例如:

return (<ScrollView?

????contentContainerStyle={styles.contentContainer}>?

????</ScrollView>??

);?

...

contentInset {頂部:數字型，左部:數字型，底部:數字型，右部:數字型}

contentOffset PointPropType

decelerationRate數字型

????????一個浮點數，決定了在用戶移開手指后，滾動視圖減速有多快。合理的選擇包括——正常:0.998(默認)——快 速:0.9

horizontal布爾型

????????當為真時，滾動視圖的子視圖水平排列為一行，而不是豎直排列為一列。默認值是false。

keyboardDismissMode枚舉型(“none”，“interactive”，“onDrag”)

????????確定鍵盤在響應一個拖動時是否被摒棄。

????——“none”(默認)，拖動沒有摒棄鍵盤。

????——“onDrag”，當拖動開 始時鍵盤就被摒棄了。

????——“interactive”，鍵盤被拖動交互式地摒棄并且與觸摸同步移動;向上拖動取消了摒 棄。????

keyboardShouldPersistTaps布爾型

????????當為假時，當鍵盤向上摒棄鍵盤時，輕擊外部關注文本輸入。當為真時，滾動視圖不會抓取輕擊，鍵盤不會自動 摒棄。默認值是false。

maximumZoomScale數字型

????????最大允許縮放比例。默認值是1.0。

minimumZoomScale數字型

????????最小允許縮放比例。默認值是1.0。

onScroll函數型

onScrollAnimationEnd函數型

pagingEnabled布爾型

????????當為真時，滾動視圖在滾動時會在滾動視圖的尺寸的倍數上停止滾動。這可以用于水平分頁。默認值是false。

removeClippedSubviews布爾型

????????實驗: 當為真時，屏幕以外的子視圖(它的overflow值是`hidden )從本地備份的superview中刪除。這在長 列表中可以提高滾動性能。默認值是false。

scrollEnabled布爾型

scrollEventThrottle數字型

scrollIndicatorInsets {頂部:數字型，左部:數字型，底部:數字型，右部:數字型}

scrollsToTop布爾型

????????當為真時，輕擊狀態欄滾動視圖會滾動到頂部。默認值為true。

showsHorizontalScrollIndicator布爾型

showsVerticalScrollIndicator布爾型

stickyHeaderIndices [數字型]

????????一組子視圖表明確定當視圖滾動時哪些子視圖會停靠在屏幕的頂端。例如，傳遞stickyHeaderIndices = {[0]}將使得第一個子視圖固定在滾動視圖的頂部。此屬性不支持與 horizontal = {true}結合。

3.4.2 style

Flexbox...

backgroundColor字符串型

borderBottomColor字符串型

borderColor字符串型

borderLeftColor字符串型

borderRadius數字型

borderRightColor字符串型

borderTopColor字符串型

opacity數字型

overflow枚舉型(‘visible’,’hidden’)

rotation數字型

scaleX數字型

scaleY數字型

shadowColor字符串型

shadowOffset {高:數字型，寬:數字型}

shadowOpacity數字型

shadowRadius數字型

transformMatrix [數字型]

translateX數字型

translateY數字型

zoomScale數字型 當前滾動視圖內容的規模。默認值是1.0。

3.5 文本

????????用于顯示文本的響應組件，支持嵌套、樣式和觸發處理。在接下來的例子中，嵌套的標題和正文文本將從style s.baseText繼承FontFamily，但是標題會提供它自己其他的設計風格。標題和正文在文字換行時會堆疊在彼此 之上。

renderText: function() {

? return (

????<Text style={styles.baseText}>

? ? ????<Text style={styles.titleText} onPress={this.onPressTitle}>

???????????{this.state.titleText + '\n\n'}

????????</Text>

????????<Text numberOfLines={5}>

???????????{this.state.bodyText}

????????</Text>

????</Text>

? );

},

...

var styles = StyleSheet.create({

? baseText: {

??? fontFamily: 'Cochin',

? },

? titleText: {

??? fontSize: 20,

??? fontWeight: 'bold',

? },

};

3.5.1 Props

numberOfLines數值型

????????用于在計算文本布局后將文本和省略符號進行截斷，包括換行，這樣總的行數就不會超過這個值。

onPress函數

????????這個函數被稱為按下。在默認高亮狀態下，文本內部是支持按下動作處理的(該函數在suppressHighlighting是禁用的)。

3.5.2 style

View#style...

color字符串型

containerBackgroundColor字符串型

fontFamily字符串型

fontSize數值型

fontStyle enum('normal', 'italic')

fontWeight enum("normal", 'bold', '100', '200', '300', '400','500', '600', '700', '800', '900')

lineHeight數值型

textAlign enum("auto", 'left', 'right', 'center')

writingDirection enum("auto", 'ltr', 'rtl')

suppressHighlighting布爾型

????????值為真時，當文本被按下時沒有視覺上的變化。默認情況下，按下之前是一個灰色橢圓高亮的文本。

testID字符串型

????????在端到端測試時用于定位視圖

描述

3.6 容器

????????元素是與布局設計有特定關系的:內部的一切都不再使用flexbox布局而是使用文本布局。這意味著一 個內部的元素不在是矩形的，而是在結尾的時候被包裝起來。

3.7 有限制性的樣式繼承

????????在網絡上，為整個文檔設置字體體系和大小的常用方法是:

/* CSS, *not* React Native */

html {

? font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;

? font-size: 11px;

? color: #141823;

}

????????當瀏覽器想要顯示一個文本節點時，它會一直走到樹的根元素，并且找到一個有font-size屬性的元素。該系統 一個意想不到的性質是任何節點都可以有font-size屬性，包括一個<div>。這是為了方便而設計的，盡管語義 并不是正確的。

????????在React Naitve里，我們關于這一點會更嚴格:你必須將<Text>組件里的所有節點都進行包裝;你不能在<View>下直接擁有一個文本節點。

???? // BAD: will fatal, can't have a text node as child of a <View>

????<View>

?????? Some text

????</View>

???? // GOOD

????<View>

????????<Text>

???????? ????Some text

? ? ? ? </Text>

????</View>

????????你也失去了對整個子樹設置字體的能力。為了在你的應用程序里使用一致為字體和大小，推薦使用的方法是創建 一個包括他們的MyAppText組件，并且在你的應用程序里使用這個組件。你可以使用該組件來構成更多特定的 組件，比如用于其他類型文本的MyAppHeaderText組件。

<View>

? ? <MyAppText>Text styled with the default font for the entire application</MyAppText>

????<MyAppHeaderText>Text styled as a header</MyAppHeaderText>

</View>

????????React Native還有繼承風格的概念，但是僅限于文本子樹。在這種情況下，第二部分將是粗體和紅色。

<Text style={{fontWeight: 'bold'}}>

?????? I am bold

????<Text style={{color: 'red'}}>

???????? and red

????</Text>

</Text>

????????我們相信更多的文本約束方法將會產生更好的應用程序:

????? (開發人員)響應組件的設計源于大腦中孤立的想法:你應該有能力將你的組件放置在你應用程序的任何一 個地方，相信只有工具是相同的，那么它的表現和行為都是相同的。文本屬性是可以從工具外繼承的，這會 打破這種孤立。

????? (實現人員)ReactNative實現也是很簡單的。我們不需要對每一個單一的元素都要有一個FontFamily模塊，并且我們在每一次顯示一個文本節點時也不需要對樹遍歷到根節點。風格的繼承只需要在原生文本內 部進行編碼，不需要泄露給其他文本或者是系統本身。

3.8 文本輸入

????????通過鍵盤將文本輸入到應用程序的一個基本的組件。屬性提供幾個功能的可配置性，比如自動校正，自動還 原，占位符文本，和不同的鍵盤類型，如數字鍵盤。 最簡單的一個用例是放置一個TextInput，利用Text事件來讀取用戶的輸入。還有其他的事件可以使用，比如onSubmitEditing和onFocus。一個簡單的例 子:

onChange

<View>

????<TextInput

??? ????style={{height:40, borderColor: 'gray', borderWidth: 1}}

???????onChangeText={(text) => this.setState({input: text})}

? ? ?/>

? ? <Text> {'user input: ' + this.state.input}</Text>

</View>

3.8.1 屬性

? ? autoCapitalize enum('none', 'sentences', 'words','characters')

????????可以通知文本輸入自動利用某些字符。

????? characters:所有字符，

????? words:每一個單詞的首字母

????? sentences:每個句子的首字母(默認情況下)

????? none:不會自動使用任何東西

????autoCorrect布爾型

????????如果值為假，禁用自動校正。默認值為真。

????autoFocus布爾型

????????如果值為真，聚焦componentDidMount上的文本。默認值為假。

????bufferDelay數值型

????????這個會幫助避免由于JS和原生文本輸入之間的競態條件而丟失字符。默認值應該是沒問題的，但是如果你每一 個按鍵都操作的非常緩慢，那么你可能想嘗試增加這個。

????clearButtonMode enum('never', 'while-editing','unless-editing', 'always')

????????清除按鈕出現在文本視圖右側的時機

????controlled布爾型

????????如果你真想要它表現成一個控制組件，你可以將它的值設置為真，但是按下按鍵，并且/或者緩慢打字，你可能會 看到它閃爍，這取決于你如何處理onChange事件。

????editable布爾型

????????如果值為假，文本是不可編輯的。默認值為真。

????enablesReturnKeyAutomatically布爾型

????????如果值為真，當沒有文本的時候鍵盤是不能返回鍵值的，當有文本的時候會自動返回。默認值為假。

????keyboardType enum('default', "ascii-capable",'numbers-and-punctuation', 'url', 'number-pad', 'phon e-pad', 'name-phone-pad','email-address', 'decimal-pad', 'twitter', 'web-search', "numeric")

????????決定打開哪種鍵盤，例如，數字鍵盤。

????multiline布爾型

????????如果值為真，文本輸入可以輸入多行。默認值為假。

????onBlur函數

????????當文本輸入是模糊的，調用回調函數

????onChange函數

????????當文本輸入的文本發生變化時，調用回調函數

????onChangeText函數

????onEndEditing函數

????onFocus函數

????????當輸入的文本是聚焦狀態時，調用回調函數

????onSubmitEditing函數

????password布爾型

????????如果值為真，文本輸入框就成為一個密碼區域。默認值為假。

????placeholder字符串型

????????在文本輸入之前字符串將被呈現出來

????placeholderTextColor字符串型

????????占位符字符串的文本顏色

????returnKeyType enum('default', 'go', 'google', 'join','next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')

????????決定返回鍵的樣式

????secureTextEntry布爾型

????????如果值為真，文本輸入框就會使輸入的文本變得模糊，以便于像密碼這樣敏感的文本保持安全。默認值為假。

????selectionState文檔選擇狀態

????????見DocumentSelectionState.js，一些狀態是為了維護一個文檔的選擇信息。

3.8.2 styleText#style

testID字符串型

????用于端對端測試時定位視圖。

value字符串型

????文本輸入的默認值

3.9 高亮觸摸

????????一個包裝器是為了讓視圖對觸發做出合適的響應。按下按鈕，包裝后的視圖的透明性就會降低，這樣底襯的顏色就會顯示出來，使視圖顏色變暗或者著色。底襯的出現是因為向視圖層次結構添加了一個視圖，如果使用不正確的話，這有時候會導致不必要的認為視覺效果，例如，如果包裝了的視圖的背景顏色不是很明確的設置成一個不透明的顏色。

3.9.1 屬性

????activeOpacity數值型

????????當觸發處于活躍狀態時，確定包裝后的使徒的不透明度。

????style View#style

????????underlayColor字符串型 當觸發處于活躍狀態時，底襯的顏色會顯示出來。

3.10 不透明觸摸

????????一個包裝器是為了讓視圖對觸發做出合適的響應。按下按鈕，包裝后的視圖的透明性就會降低，變暗。這個動作的完成實際上并沒有改變視圖的層次，一般來說很容易添加到一個應用程序，并且不會產生奇怪的副作用。????????

3.10.1 屬性

????activeOpacity數值

????????當觸發處于活躍狀態時，確定包裝后的使徒的不透明度。

3.11 無反饋觸摸

3.11.1 成員函數

????onLongPress函數

????onPress函數

????????釋放觸摸時該函數被調用,但如果觸摸被取消則不調用(例如被竊取了應答器鎖的滾動取消)。

????onPressIn函數

????onPressOut函數

3.12 視圖

????????創建UI最基本的組件，view是一個容器，它支持flexbox布局、風格、一些觸發處理，和可訪問性控制，它被設計成嵌套在其他視圖里，并且有0到很多個任意類型的孩子。view直接映射到原生視圖，相當于在任意正在運行的平臺上的響應，不管它是UIView，<div>，android.view，等等。這個例子創建了一個視圖，將兩個 顏色的框和自定義的組件打包填充成一行。

3.12.1 屬性

????accessibilityLabel字符串型

????????當用戶與元素進行交互時，覆蓋通過屏幕閱讀器閱讀的文本。在默認情況下，標簽是通過遍歷所有孩子和累積所有由空間隔開的文本節點創建的。

????accessible布爾型

????????當它的值為真時，說明視圖是一個可訪問的元素。在默認情況下，所有的可觸發的元素都是可以被訪問的。

????onMoveShouldSetResponder函數

????????對于大多數的觸發交互，你可能只是想在TouchableHighlight或者TouchableOpacity里包裝你的組件。為了 進一步的探討，檢查Touchable.js，ScrollResponder.js和ResponderEventPlugin.js。

????onResponderGrant函數

????onResponderMove函數

????onResponderReject函數

????onResponderRelease函數

????onResponderTerminate函數

????onResponderTerminationRequest函數

????onStartShouldSetResponder函數

????onStartShouldSetResponderCapture函數

????pointerEvents enum('box-none', 'none', 'box-only', 'auto')

????????缺乏auto屬性，none更像是CSS的none值。box-none就好像你已經應用了CSS類:

.box-none {

??pointer-events: none;

?}

?.box-none * {

??pointer-events: all;

?}

box-only相當于

.box-only {

??pointer-events: all;

?}

?.box-only * {

?? pointer-events: none;

?}

????????但是由于pointerEvents并不影響布局/外觀，通過添加附加模式，我們已經偏離了規范，我們選擇在style上不包括pointerEvents。在一些平臺上，不管怎樣偶們都需要將它作為一個className來實現。是否使用style時這個平臺的實現細節。

removeClippedSubviews布爾

????????這是一個通過RCTView顯示的特定性能屬性，當有很多子視圖，并且它們大部分都是在幕后，這時被用于滾動內容。為了使這個屬性有效，它必須被應用到一個視圖中，在這個視圖里包含很多子視圖和外部約束。子視圖中還應該有溢出:隱藏，應該包含視圖(或者它的一個子視圖)。

style字體

backgroundColor字符串

borderBottomColor字符串

borderColor字符串

borderLeftColor字符串

borderRadius數值

borderRightColor字符串

borderTopColor字符串

opacity數值

overflow enum('visible', 'hidden')

rotation數值

scaleX數值

scaleY數值

shadowColor字符串

shadowOffset {h: number, w: number}

shadowOpacity數值

shadowRadius數值

transformMatrix [數值]

translateX數值

translateY數值

testID字符串型

????????在端到端測試中用于定位視圖

3.13 Web視圖

3.13.1 屬性

automaticallyAdjustContentInset布爾型

contentInset {top: number, left: number, bottom: number, right: number}

html字符串型

onNavigationStateChange函數

renderError函數

renderLoading函數

shouldInjectAJAXHandler布爾型

startInLoadingState布爾型

style View#style

url字符串型

4 資源加載

4.1 靜態資源

????????在項目的進程中，添加并且移除和處理那些在應用程序不是經常使用的圖片是很常見的情況。為了處理這種情 況，我們需要找到一個方法來靜態地定位那些被用在應用程序里的圖片。因此，我們使用了一個標記器。唯一允 許的指向bundle里的圖片的方法就是在源文件中遍歷地搜索require('image!name-of-the-asset')。

// GOOD

<Image source={require('image!my-icon')} />

// BAD

var icon = this.props.active ? 'my-icon-active' :'my-icon-inactive';

<Image source={require('image!' + icon)} />

// GOOD

var icon = this.props.active ?require('image!my-icon-active') : require('image!my-icon-inactive');

<Image source={icon} />

????????當主要的代碼執行到這里，你就可以做一些有趣的事情，比如自動將那些用于應用程序的assets打包。注 意，這些代碼不是強制實施的，但不代表將來也不會。

4.1.1 使用Images.xcassets將靜態資源添加到你的iOS應用程序中

NOTE: 生成應用程序所需的新資源

????????無論在什么時候，您想把新的資源添加到Images.xcassets中，您都需要在使用它之前通過Xcode來重新構 建您的應用程序 — — 僅在模擬器內重新加載它是不夠的。

????????這一進程正在被改進，不久就會提供更好的工作流程。

4.1.2 將靜態資源添加到您的Android應用程序中

????????將您的圖像作為位圖畫板添加到android項目中( <yourapp>/android/app/src/main/res)。為了給您的assets文件提供不同的分辨率，使用配置限定符進行檢查。 通常情況下，您將想要把您的assets文件放在下列目錄(如果它們不存在，那么在res下創建它們):

????? drawable-mdpi (1x)

????? drawable-hdpi (1.5x)

????? drawable-xhdpi (2x)?

????? drawable-xxhdpi (3x)

????????如果您的asset文件丟失了一種分辨率，那么Android將采取下一個最好的分辨率并且為您調整它的大小。

????NOTE:生成應用程序所需的新資源

????????無論在什么時候您把新的資源添加到您的畫板中您都需要在使用它之前通過運行react-nativerun-android重新構建您的應用程序-僅重新加載JS是不夠的。

????????這一進程正在被改進，不久就會提供更好的工作流程。

4.2 網絡資源

????????在您進行編譯的時候，許多您的應用程序中需要展示的圖片都不能使用，或者你會想要通過加載一些動態圖片來保持二進制大小在較低的狀態。不像靜態資源那樣，您將需要手動指定圖像的尺寸。????

// GOOD

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}

?????? style={{width:400, height: 400}} />

// BAD

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

4.3 本地文件系統資源

????????請在 CameraRoll 中查看使用 Images.xcassets 之外的本地資源示例 。

4.4 Source是一個對象類型

????????在ReactNative中，一個有趣的決定是src特性將會被命名為source，并且不作為一個字符串而是一個uri特性的對象類型。

<Image source={{uri: 'something.jpg'}} />

????????站在底層來看，這樣做的原因是它允許將元數據依附到這個對象中。舉個例子，你正在使用require('image!icon')，我們將添加isStatic作為一個flag來標識本地文件(不要依賴這例子，將來這可能會改變!)。這在 將來同時也會成為可能，比如我們可能會支持子畫面，并用它來取代輸出{uri: ...}，我們可以輸出{uri: ..., crop: {left: 10, top:50, width: 20, height: 40}}同時支持在所有已經存在的網站中透明地顯示子畫 面。

????????在用戶角度上，這會讓你用有用的特性比如圖片的幾何尺寸來注釋對象類型，從而計算出將要顯示出來的尺寸。盡情地使用這種數據類型來儲存你的圖片吧。

4.5 背景圖片疊加

return (

????<Image source={...}>

? ? ? ?<Text>Inside</Text>

????</Image>

);

4.6 非主線程加載

????????圖片的解析會花費很多的時間。這是導致網頁的幀數下降的其中一個重要的原因，因為解析工作會被執行在主線 程中。在React Native中，圖片的解析會在不同的線程中執行。在實際操作中，你已經處理好這種情況，當圖 片還沒有下載完成，因此需要將placeholder顯示出來，這不用你寫任何代碼。????

4.7 應用程序注冊表

????????AppRegistry是運行所有ReactNative應用程序的JS入口點。應用程序跟組件需要通過AppRegistry.registerComponent來注冊它們自身，然后本地系統就可以加載應用程序的包，再然后當AppRegistry.runApplication準備就緒后就可以真正的運行該應用程序了。

????????AppRegistry在require序列里是required，確保在其他模塊被需要之前JS執行環境已經被required。

4.7.1 方法

static **registerConfig**(config: Array)

static **registerComponent**(appKey: string, getComponentFunc: Function)

static **registerRunnable**(appKey: string, func: Function)

static **runApplication**(appKey: string, appParameters: any)