1 IOS組件

1.1 iOS活動(dòng)指示器

1.1.1 Props

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

color字符串型；

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

size枚舉型(“小”唇辨，“大”)指示器的大小。小的高度為20锉罐，大的高度為36帆竹。

1.2 iOS日期選擇器

????????使用DatePickerIOS來(lái)在iOS上呈現(xiàn)一個(gè)日期/時(shí)間選擇器(selector)。這是一個(gè)控制組件脓规，所以為了組件更 新栽连，你必須鉤在onDateChange回調(diào)中，并更新date支持侨舆，否則用戶的變化將立即恢復(fù)以反映props.date秒紧。

1.2.1 Props

????date日期型??

????????當(dāng)前選中的日期。

????maximumDate日期型

????????最大的日期挨下。限制可能的日期/時(shí)間值的范圍熔恢。

????minimumDate日期型

????????最小的日期。限制了可能的日期/時(shí)間值的范圍臭笆。

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

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

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

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

????onDateChange函數(shù)型

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

????????當(dāng)用戶更改了UI的日期或時(shí)間時(shí)鹰霍，它就會(huì)被調(diào)用。第一個(gè)也是唯一一個(gè)參數(shù)是一個(gè)Date對(duì)象茵乱，代表了新的日期和時(shí)間衅谷。

? ? timeZoneOffsetInMinutes數(shù)字型

????????在幾分鐘內(nèi)時(shí)區(qū)偏移。

????????默認(rèn)情況下似将，日期選擇器將使用設(shè)備的時(shí)區(qū)获黔。有了這個(gè)參數(shù)，才有可能迫使某個(gè)時(shí)區(qū)偏移在验。例如玷氏，為了顯示太平 洋的標(biāo)準(zhǔn)時(shí)間，傳遞-7 * 60腋舌。

1.3 iOS導(dǎo)航器

????????iOS導(dǎo)航器包裝了UIKit導(dǎo)航盏触，并且允許你添加跨應(yīng)用程序的back-swipe功能。

1.3.1 路線

????????路線是用于描述導(dǎo)航器每個(gè)頁(yè)面的一個(gè)對(duì)象块饺。第一個(gè)提供給NavigatorIOS的路線是initialRoute :

render: function() {

? return (

????<NavigatorIOS

????? initialRoute={{

??????? component:MyView,

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

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

? ? ? }}

????/>

? );

},

????????現(xiàn)在將由導(dǎo)航器呈現(xiàn)MyView赞辩。它將在route道具，導(dǎo)航器及所有的passProps指定的道具中接受一個(gè)路線對(duì)象授艰。

????????路線完整的定義請(qǐng)看initialRoute propType辨嗽。

1.3.2 導(dǎo)航器

????????Navigator是視圖能夠調(diào)用的導(dǎo)航函數(shù)的一個(gè)對(duì)象。它作為一個(gè)道具會(huì)被傳遞給任何由NavigatorIOS呈現(xiàn)的組件淮腾。

var MyView = React.createClass({

? ? _handleBackButtonPress: function() {

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

? ? },

? ? _handleNextButtonPress: function() {

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

????},

????...?

});

????????一個(gè)導(dǎo)航對(duì)象包含以下功能:

????? push(route)

????——導(dǎo)航到一個(gè)新的路線

????? pop()

????——返回一個(gè)頁(yè)面

????? popN(n)

????——一次返回N頁(yè)糟需。當(dāng)N=1時(shí)屉佳，該行為相當(dāng)于pop()

????? replace(route)

????——取代當(dāng)前頁(yè)面的路線，并立即為新路線加載視圖

????? replacePrevious(route)

????——取代前一頁(yè)的路線/視圖

????? replacePreviousAndPop(route)

????——取代了以前的路線/視圖并轉(zhuǎn)換回去

????? resetTo(route)

????——取代頂級(jí)的項(xiàng)目并popToTop

????? popToRoute(route)

????——為特定的路線對(duì)象回到項(xiàng)目

????? popToTop()

????——回到頂級(jí)項(xiàng)目

????????導(dǎo)航功能在NavigatorIOS組件中也是可用的:

?var MyView =React.createClass({

? ? ?_handleNavigationRequest: function() {

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

? ? ?},

? ? ?render: () => (

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

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

? ? ? ? />

????),

});

1.3.3 Props

????????initialRoute{組件:函數(shù)型洲押，標(biāo)題:字符串型武花，passProps:對(duì)象型，backButtonTitle:字符串型杈帐，rightButt onTitle:字符串型体箕，onRightButtonPress:函數(shù)型，wrapperStyle:[對(duì)象型Object]}

????????NavigatorIOS使用“路線”對(duì)象來(lái)識(shí)別子視圖挑童，道具干旁，及導(dǎo)航欄的配置∨阢澹“push”和所有其他的導(dǎo)航操作預(yù)計(jì)路 線是這樣的:

????itemWrapperStyle View#style

????????默認(rèn)的包為navigator中的組件設(shè)置樣式争群。一個(gè)常見(jiàn)的用例是為每一頁(yè)設(shè)置backgroundColor

????tintColor字符串型在導(dǎo)航欄中的按鈕使用的顏色

1.4 iOS選擇器

1.4.1 Props

onValueChange 函數(shù)型

selectedValue 任意類型

1.5 iOS滑塊

1.5.1 屬性

????maximumValue 數(shù)值型

????????滑動(dòng)塊初始化最大值。默認(rèn)值是1大年。

????minimumValue數(shù)值型

????????滑動(dòng)塊初始化最小值换薄。默認(rèn)值是0。

????onSlidingComplete函數(shù)

????????當(dāng)用戶已經(jīng)完成改變它的值后翔试，調(diào)用回調(diào)函數(shù)(例如轻要，當(dāng)滑動(dòng)塊被釋放)

????onValueChange函數(shù)

????????當(dāng)用戶拖動(dòng)滑動(dòng)塊時(shí)，連續(xù)不斷的調(diào)用回調(diào)函數(shù)

1.5.2 styleView#style

????????用于對(duì)Slider的設(shè)計(jì)與布局垦缅。未獲取更多的信息冲泥，請(qǐng)查看StyleSheet.js和ViewStylePropTypes.js

????value數(shù)值型

????????初始化滑動(dòng)塊的值。該值應(yīng)該是介于最大值和最小值之間的壁涎，最大值默認(rèn)為1凡恍，最小值默認(rèn)為0。默認(rèn)值為0怔球。 這不是一個(gè)控制組件嚼酝，比如說(shuō)，如果你不更新組件的值竟坛，那么它將不會(huì)被重置成它的初始值闽巩。

1.6 iOS開(kāi)關(guān)

????????使用SwitchIOS在iOS上呈現(xiàn)出布爾型的輸入。這是一個(gè)控件組件担汤，所以為了更新組件类溢，你必須使用Change回調(diào)并且更新值value女嘲。否則的話用戶的改變會(huì)被立即反映到props.value骤宣，這是一個(gè)真理温数。

1.6.1 屬性

????disabled布爾型

????????如果值為真，那么用戶將不能切換開(kāi)關(guān)驾荣。默認(rèn)值為假外构。

????onTintColor字符串型

????????當(dāng)開(kāi)關(guān)打開(kāi)時(shí)候的背景顏色。

????onValueChange函數(shù)

????????當(dāng)用戶切換開(kāi)關(guān)時(shí)播掷，調(diào)用回調(diào)函數(shù)审编。

????thumbTintColor字符串型

????????開(kāi)關(guān)按鈕的背景顏色。

????tintColor字符串型

????????當(dāng)開(kāi)關(guān)關(guān)閉后的背景顏色歧匈。

????value布爾型

????????開(kāi)關(guān)的值垒酬，如果為真，開(kāi)關(guān)會(huì)打開(kāi)件炉。默認(rèn)值為假勘究。

1.7 iOS選項(xiàng)卡

1.7.1 屬性

1.7.2 styleView#style

1.8 TabBarIOS.Item

????badge

????????位于圖標(biāo)右上角的小的紅色的泡沫。

????icon Image.propTypes.source

????????標(biāo)記的自動(dòng)以圖標(biāo)斟冕。當(dāng)定義了系統(tǒng)圖標(biāo)時(shí)口糕，它將被忽略。

????onPress函數(shù)

????????當(dāng)標(biāo)記被選中時(shí)磕蛇，該函數(shù)回調(diào)景描，你應(yīng)該改變組件的狀態(tài)來(lái)設(shè)置selected={true}。

????selected布爾值

????????它指定了孩子是否可見(jiàn)秀撇。如果你看到了一個(gè)空白的內(nèi)容超棺，你很有可能是忘記添加選中項(xiàng)了。

????selectedIcon Image.propTypes.source

????????當(dāng)標(biāo)記被選中時(shí)呵燕，自定義的圖標(biāo)棠绘。當(dāng)定義了系統(tǒng)圖標(biāo)時(shí)，它會(huì)被忽略再扭。如果為空氧苍，那么圖標(biāo)會(huì)呈現(xiàn)藍(lán)色。

1.8.1 styleView#style

????????React樣式對(duì)象泛范。

systemIcon枚舉('bookmarks' 'contacts' 'downloads'候引，'favorites'，'featured'敦跌，'history'澄干，'more'，'most-recent'柠傍，'most-viewed'麸俘，'recents'，'search'惧笛，'top-rated')

????????項(xiàng)目有一些預(yù)定義的系統(tǒng)圖標(biāo)从媚。請(qǐng)注意如果你正在使用它們，標(biāo)題和選中的圖標(biāo)將被系統(tǒng)圖標(biāo)覆蓋患整。

????title字符串

????????出現(xiàn)在圖標(biāo)下的文本拜效。當(dāng)定義了系統(tǒng)圖標(biāo)時(shí)喷众，它會(huì)被忽略。

1.9 嵌套文本

????????在iOS里紧憾，顯示格式化文本的方式是使用NSAttributedString :你可以為你想要顯示和注釋的文本劃定一些特 定的格式范圍到千。實(shí)際上，這是非常無(wú)聊的赴穗。對(duì)于React Native憔四，我們決定使用Web模式，在這里我們可以利用 嵌套文本來(lái)達(dá)到同樣的效果般眉。

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

? ?I am bold

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

????and red

????</Text>

</Text>

????????在幕后了赵，這將會(huì)被轉(zhuǎn)換成一個(gè)完全的包含以下信息的NSAttributedString

???? "I am bold and red"

???? 0-9: bold

???? 9-17: bold, red

1.10 iOS警告

????????利用一個(gè)特定的標(biāo)題和消息來(lái)啟動(dòng)一個(gè)警告對(duì)話框。

????????提供一個(gè)可選按鈕的列表甸赃。點(diǎn)擊任何按鈕觸發(fā)各自的按下回調(diào)動(dòng)作柿汛，并且忽略警告。在默認(rèn)情況下埠对，只有一個(gè)按 鈕是“OK”按鈕苛茂。列表中最后一個(gè)按鈕被視為“主”按鈕，它被用粗體顯示出來(lái)了鸠窗。

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組件封裝平臺(tái)DrawerLayout(僅適用于Android)妓羊。Drawer(通常用于導(dǎo)航)呈現(xiàn)renderNavigationView渲染導(dǎo)航視圖和直接子級(jí)，是呈現(xiàn)(您的內(nèi)容)的主要視圖稍计。導(dǎo)航視圖是最初在屏幕上不可見(jiàn)的躁绸，但可以從由drawerPosition指定的窗口的側(cè)面拉出，其寬度可通過(guò)drawerWidth設(shè)置臣嚣。

2.2 ProgressBarAndroid

????????React組建包裹了只是Android部分的ProgressBar净刮。這個(gè)組件是被用來(lái)提示這個(gè)應(yīng)用正在加載或者在應(yīng)用里 面有一些操作。

例子:

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樣式屬性 進(jìn)度條的樣式硅则，包括:

????? Horizontal

????? Small

????? Large

????? Inverse????

????? SmallInverse

????? LargeInverse

????????testID字符串 在端對(duì)端測(cè)試?yán)锩姹挥脕?lái)定位這個(gè)視圖淹父。

2.3 SwitchAndroid

????????標(biāo)準(zhǔn)的Android雙態(tài)切換組件屬性

disable bool

????????如果為true，則該組件不能進(jìn)行交互怎虫。onValueChange function當(dāng)值發(fā)生變化時(shí)調(diào)用新的值暑认。

testID string

????????用于在端到端測(cè)試中查找此視圖。

value bool

????????開(kāi)關(guān)的布爾值大审。

2.4 ToolbarAndroid

????????React組件蘸际，包裝了Android Toolbar小工具。工具欄可以顯示一個(gè)標(biāo)志徒扶，導(dǎo)航圖標(biāo)(如漢堡包菜單)粮彤，標(biāo)題 和副標(biāo)題和操作列表。標(biāo)題和子標(biāo)題被擴(kuò)展這樣以來(lái)標(biāo)志和導(dǎo)航圖標(biāo)顯示在左邊，標(biāo)題和副標(biāo)題在中間并且操作 在右邊导坟。

????????如果工具欄具有唯一子級(jí)屿良，它將顯示在標(biāo)題和操作之間。

例子:

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}]

????????將工具欄上的可能動(dòng)作設(shè)置為動(dòng)作菜單的一部分惫周。這些都顯示為圖標(biāo)或小部件右側(cè)的文本尘惧。如果不適合，它們將 被放置在一個(gè)'溢出'菜單闯两。

????????此屬性需要一個(gè)對(duì)象數(shù)組褥伴，其中每個(gè)對(duì)象具有以下鍵:

????? title :必要的,這個(gè)操作的標(biāo)題

????? icon :這個(gè)操作的圖標(biāo)谅将，例如:require('image!some_icon')

????? show :當(dāng)把這個(gè)操作顯示為一個(gè)圖標(biāo)或隱藏在溢出菜單中時(shí):always , ifRoom或never

????? showWithText :布爾值漾狼，是否顯示圖標(biāo)旁邊的文本

????logo Image.propTypes.source

????????設(shè)置工具欄的標(biāo)志。

????navIcon Image.propTypes.source

????????設(shè)置導(dǎo)航圖標(biāo)饥臂。

????onActionSelected function

????????被選中時(shí)調(diào)用回調(diào)函數(shù)逊躁。傳遞到回調(diào)的唯一參數(shù)是操作數(shù)組中的位置。

????onIconClicked function

????????在選定圖標(biāo)時(shí)調(diào)用隅熙。

????subtitle string

????????設(shè)置工具欄副標(biāo)題稽煤。

????subtitleColor string

????????設(shè)置工具欄副標(biāo)題的顏色。

????testID string

????????用于在端到端測(cè)試中查找此視圖囚戚。

????title string

????????設(shè)置工具欄標(biāo)題酵熙。

????titleColor string

????????設(shè)置工具欄副標(biāo)題的顏色。

2.5 ToastAndroid

????????它揭示了如何將本地ToastAndroid模塊作為一個(gè)JS模塊驰坊。它有一個(gè)名為showText的函數(shù)匾二，其擁有的參數(shù)如下所示:

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

????2. int持續(xù)期:toast的持續(xù)期∪剑可能是ToastAndroid.SHORT或ToastAndroid.LONG

方法

static show(message: string, duration: number)

性質(zhì)

SHORT: MemberExpression

LONG: MemberExpression

3 公共組件

3.1 列表視圖

????????列表視圖——為變化的數(shù)據(jù)列表的垂直滾動(dòng)的高效顯示而設(shè)計(jì)的一個(gè)核心組件察藐。最小的API是創(chuàng)建一個(gè)ListView.DataSource，用一個(gè)簡(jiǎn)單的數(shù)組數(shù)據(jù)的blob填充舟扎，并用那個(gè)數(shù)據(jù)源實(shí)例化一個(gè)ListView組件和一個(gè)renderRow回調(diào)分飞，它會(huì)從數(shù)組數(shù)據(jù)中帶走一個(gè)blob并返回一個(gè)可渲染的組件。

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

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>

??? />

); },

????????列表視圖還支持更高級(jí)的功能睹限，包括帶有sticky頁(yè)眉的部分譬猫，頁(yè)眉和頁(yè)腳的支持，回調(diào)到可用數(shù)據(jù)的最后()和設(shè)備窗口變化中可見(jiàn)的行集(onChangeVisibleRows)羡疗，以及一些性能優(yōu)化删窒。

????????當(dāng)動(dòng)態(tài)加載一些可能非常大(或概念上無(wú)限大的)數(shù)據(jù)集時(shí)，為了讓列表視圖滾送的順暢顺囊，有一些性能操作設(shè)計(jì):

????? 只有重新呈現(xiàn)改變行——提供給數(shù)據(jù)源的hasRowChanged函數(shù)告訴列表視圖是否需要重新呈現(xiàn)一行肌索，因?yàn)樵磾?shù)據(jù)發(fā)生了變化——更多細(xì)節(jié)請(qǐng)看ListViewDataSource。

????? 行限速呈現(xiàn)——默認(rèn)情況下，每次事件循環(huán)時(shí)诚亚，只顯示一行(可用pageSize道具定制)晕换。這將工作分解為小塊，在呈現(xiàn)行時(shí)站宗，減少框架下降的機(jī)會(huì)闸准。

3.1.1 Props

ScrollView props...

dataSource 列表視圖數(shù)據(jù)源

initialListSize 數(shù)字型

????????多少行呈現(xiàn)在初始組件裝置中。使用這個(gè)來(lái)實(shí)現(xiàn)梢灭，這樣第一個(gè)屏幕需要的數(shù)據(jù)就會(huì)一次出現(xiàn)夷家，而不是在多個(gè)框架的過(guò)程中出現(xiàn)。

onChangeVisibleRows函數(shù)型

????????(visibleRows, changedRows) => void 當(dāng)可見(jiàn)的行集改變時(shí)調(diào)用敏释。visibleRows為所有可見(jiàn)的行映射{sectionID: {rowID: true }}库快，changedRows為已經(jīng)改變了它們可見(jiàn)性的行映射{sectionID: {rowID: true |false }}，true表明行可見(jiàn)钥顽，而false表明行已經(jīng)從視圖中被刪除了义屏。

onEndReached函數(shù)型

????????當(dāng)所有行已經(jīng)呈現(xiàn)并且列表被滾動(dòng)到了onEndReachedThreshold的底部時(shí)被調(diào)用。提供了native滾動(dòng)事件蜂大。

onEndReachedThreshold 數(shù)字型

onEndReached 像素的閾值闽铐。

pageSize數(shù)字型

????????每次事件循環(huán)顯示的行的數(shù)量。

removeClippedSubviews 布爾型

????????為提高大型列表滾動(dòng)性能的實(shí)驗(yàn)性能優(yōu)化奶浦，與溢出一起使用:“隱藏”在行容器中兄墅。使用時(shí)自己承擔(dān)風(fēng)險(xiǎn)。

renderFooter函數(shù)型

????????() => renderable 頁(yè)眉和頁(yè)腳在每個(gè)呈現(xiàn)過(guò)程中都會(huì)出現(xiàn)(如果提供了這些道具)澳叉。如果重新呈現(xiàn)它們耗費(fèi)很大隙咸，那就把它們包在StaticContainer或其他適當(dāng)?shù)臋C(jī)制中。在每一個(gè)呈現(xiàn)過(guò)程中耳高，頁(yè)腳始終是在列表的底部扎瓶，頁(yè)眉始終在列表的頂 部。

renderHeader函數(shù)型renderRow函數(shù)型

????????(rowData, sectionID, rowID) => renderable需要從數(shù)據(jù)源和它的id取走一個(gè)數(shù)據(jù)條目泌枪，并返回一個(gè)可渲染 的作為行呈現(xiàn)的組件概荷。默認(rèn)的情況下，數(shù)據(jù)正是被放入了數(shù)據(jù)源的東西碌燕，但也可以提供自定義的提取器误证。

renderSectionHeader函數(shù)型

????????(sectionData, sectionID) => renderable 如果提供了該函數(shù)，那么本節(jié)的sticky頁(yè)眉就會(huì)呈現(xiàn)修壕。Sticky行為意味著它將帶著本節(jié)頂部的內(nèi)容滾動(dòng)愈捅，直到 它到達(dá)屏幕的頂端，此時(shí)它會(huì)停在屏幕頂部慈鸠，直到被下一節(jié)的頁(yè)眉推掉蓝谨。

scrollRenderAheadDistance數(shù)字型

????????在它們以像素的形式出現(xiàn)在屏幕上之前，要多早就開(kāi)始呈現(xiàn)行。

3.2 Map視圖

3.2.1 Props

????????legalLabelInsets {頂部:數(shù)字型;左部:數(shù)字型;底部:數(shù)字型;右部:數(shù)字型}

????????為map嵌入合法的標(biāo)簽譬巫，最初是在map的左下角咖楣。更多信息請(qǐng)看EdgeInsetsPropType.js。

????maxDelta數(shù)字型

????????能夠顯示的區(qū)域的最大尺寸芦昔。

????minDelta數(shù)字型

????????能夠顯示的區(qū)域的最小尺寸诱贿。

????onRegionChange函數(shù)型

????????當(dāng)用戶拖動(dòng)map時(shí)，會(huì)不斷地調(diào)用回調(diào)函數(shù)咕缎。

????onRegionChangeComplete函數(shù)型

????????當(dāng)用戶完成移動(dòng)map時(shí)珠十，調(diào)用一次回調(diào)函數(shù)。

????pitchEnabled布爾型

????????當(dāng)這個(gè)屬性設(shè)置為true凭豪，且有效的相機(jī)與map相關(guān)聯(lián)焙蹭，那么相機(jī)的螺旋角用于傾斜map的平面。當(dāng)這個(gè)屬性 設(shè)置為false時(shí)墅诡，相機(jī)的螺旋角被忽略壳嚎，并且map上總是顯示為好像用戶直接向下看桐智。

????region {緯度:數(shù)字型末早，經(jīng)度:數(shù)字型，latitudeDelta:數(shù)字型说庭，longitudeDelta:數(shù)字型}

????????該地區(qū)會(huì)被map顯示出來(lái)然磷。由中心坐標(biāo)和坐標(biāo)跨度定義的區(qū)域顯示出來(lái)。

????rotateEnabled布爾型

????????當(dāng)這個(gè)屬性設(shè)置為true刊驴，且有效的相機(jī)與map相關(guān)聯(lián)姿搜，那么相機(jī)的航向角用于圍繞map中心點(diǎn)旋轉(zhuǎn)map平 面。當(dāng)該屬性設(shè)置為false時(shí)捆憎，相機(jī)的航向角被忽略舅柜，map總是定向的，這樣真正的北方就會(huì)位于map視圖的 頂部躲惰。

????scrollEnabled布爾型

????????如果是false致份，用戶無(wú)法更改map顯示的區(qū)域。默認(rèn)值是true础拨。

????showsUserLocation布爾型

????????如果是true氮块，應(yīng)用程序會(huì)請(qǐng)求用戶的位置并關(guān)注它。默認(rèn)值是false诡宗。

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

????style View#style

????????用于MapView的樣式設(shè)置和布局塔沃。更多信息請(qǐng)看StyleSheet.js和ViewStylePropTypes.js蝠引。

????zoomEnabled布爾型

????????如果是false，用戶無(wú)法縮小/放大map。默認(rèn)值是true螃概。

3.3 導(dǎo)航器

????????在你的應(yīng)用程序中使用Navigator來(lái)在不同場(chǎng)景之間過(guò)渡边坤。為了實(shí)現(xiàn)這一功能，為導(dǎo)航器提供了路由對(duì)象來(lái)識(shí) 別每一個(gè)場(chǎng)景谅年，還提供了一個(gè)renderScene函數(shù)茧痒，導(dǎo)航器可以用它來(lái)為給定的路線渲染場(chǎng)景。

????????為了改變場(chǎng)景的動(dòng)畫或動(dòng)作屬性融蹂，提供了一個(gè)configureScene道具來(lái)為給定的路由配置對(duì)象旺订。看到導(dǎo)航器超燃。默 認(rèn)動(dòng)畫及更多的關(guān)于場(chǎng)景配置選項(xiàng)的信息区拳，請(qǐng)看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 導(dǎo)航方法

????????Navigator有兩種方式進(jìn)行導(dǎo)航意乓。如果你有一個(gè)參考元素樱调，你可以調(diào)用一些方法來(lái)觸發(fā)導(dǎo)航:

????? jumpBack()

????????——在不需要卸載當(dāng)前場(chǎng)景的情況下向后跳

????? jumpForward()

????????——向前跳轉(zhuǎn)到路線堆棧中的下一個(gè)場(chǎng)景

????? jumpTo(route)?

????????——過(guò)渡到一個(gè)現(xiàn)有的沒(méi)有被卸載的場(chǎng)景

????? push(route)

????????——導(dǎo)航到一個(gè)新的場(chǎng)景，擠壓任何你能夠jumpForward的場(chǎng)景

????? pop()

????????——回歸并卸載當(dāng)前場(chǎng)景

????? replace(route)

????????——用一個(gè)新路線替換當(dāng)前場(chǎng)景

????? replaceAtIndex(route, index)

????????——取代一個(gè)由索引指定的場(chǎng)景

????? replacePrevious(route)

????????——取代之前的場(chǎng)景

????? immediatelyResetRouteStack(routeStack)

????????——用一組路線重置每個(gè)場(chǎng)景

????? popToRoute(route)

????????——彈出一個(gè)由它的路線指定的特定的場(chǎng)景届良。這之后所有的場(chǎng)景將被卸載

????? popToTop()

????????——彈出堆棧中的第一個(gè)場(chǎng)景笆凌，卸載其他場(chǎng)景

3.3.3 導(dǎo)航器對(duì)象

????????通過(guò)renderScene函數(shù)navigator對(duì)象對(duì)場(chǎng)景是可用的。對(duì)象有所有的導(dǎo)航方法士葫，以及一些實(shí)用程序:

????? parentNavigator

????????——父導(dǎo)航對(duì)象的參考乞而，在props.navigator中被傳遞

????? onWillFocus

????????——用來(lái)向父導(dǎo)航器傳遞一個(gè)導(dǎo)航焦點(diǎn)事件

????? onDidFocus

????????——用來(lái)向父導(dǎo)航器傳遞一個(gè)導(dǎo)航焦點(diǎn)事件

3.3.4 Props

????configureScene函數(shù)型?

????????可選功能，允許配置場(chǎng)景動(dòng)畫和手勢(shì)慢显。將由路線調(diào)用爪模，且應(yīng)該返回一個(gè)場(chǎng)景配置對(duì)象

(route) => Navigator.SceneConfigs.FloatFromRight

initialRoute對(duì)象型

????????提供一個(gè)單一的“路線”來(lái)開(kāi)始。路線是一個(gè)任意的對(duì)象荚藻，導(dǎo)航器將使用它在場(chǎng)景呈現(xiàn)之前確定每個(gè)場(chǎng)景屋灌。initialRoute或initialRouteStack是必需的。

initialRouteStack [對(duì)象型]

????????提供一組路線來(lái)呈現(xiàn)最初的場(chǎng)景应狱。如果沒(méi)有提供initialRoute共郭，那么該道具就會(huì)被需求。

navigationBar節(jié)點(diǎn)型

????????以可選的方式提供一個(gè)能夠存留在場(chǎng)景之間轉(zhuǎn)換的導(dǎo)航欄

navigator對(duì)象型

????????以可選的方式從父導(dǎo)航器提供navigator對(duì)象

onDidFocus函數(shù)型

????????在場(chǎng)景過(guò)渡完成后或在最初安裝后該函數(shù)會(huì)被每個(gè)場(chǎng)景的新路線調(diào)用侦香。這將覆蓋在this.props.navigator的onD idFocus處理程序上落塑。

onItemRef函數(shù)型

????????當(dāng)場(chǎng)景參考發(fā)生變化時(shí)，該函數(shù)會(huì)被調(diào)用(ref罐韩，indexInStack)

onWillFocus函數(shù)型

????????將在安裝中和每個(gè)導(dǎo)航轉(zhuǎn)換之前發(fā)射目標(biāo)路線憾赁，覆蓋this.props.navigator中的處理程序。這將覆蓋this.prop s.navigator中的onDidFocus處理程序

renderScene函數(shù)型

????????對(duì)于一個(gè)給定的路線哪一個(gè)場(chǎng)景會(huì)出現(xiàn)需要該函數(shù)散吵。將由路線和navigator對(duì)象調(diào)用龙考。

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

sceneStyle View#style

????????設(shè)置樣式蟆肆，以應(yīng)用于每個(gè)場(chǎng)景的容器中。

3.4 滾動(dòng)視圖

????????組件封裝了滾動(dòng)視圖平臺(tái)晦款，同時(shí)提供了與鎖定“應(yīng)答”系統(tǒng)的觸摸的集成炎功。尚不支持其他來(lái)自阻止?jié)L動(dòng)視圖成為響應(yīng)者的包含的響應(yīng)。

3.4.1 Props

alwaysBounceHorizontal 布爾型

????????當(dāng)為真時(shí)缓溅，滾動(dòng)視圖到達(dá)內(nèi)容底部時(shí)蛇损，水平反彈，即使該內(nèi)容小于滾動(dòng)視圖坛怪。當(dāng)horizontal={true}時(shí)淤齐，默認(rèn)值 為true，否則袜匿，默認(rèn)值為false更啄。

alwaysBounceVertical 布爾型

????????當(dāng)為真時(shí)，滾動(dòng)視圖到達(dá)內(nèi)容底部時(shí)居灯，垂直反彈祭务，即使該內(nèi)容小于滾動(dòng)視圖。當(dāng)horizontal={true}時(shí)怪嫌，默認(rèn)值 為false义锥，否則，默認(rèn)值為true喇勋。

automaticallyAdjustContentInsets 布爾型

bounces 布爾型

????????當(dāng)為真時(shí)缨该，當(dāng)滾動(dòng)視圖到達(dá)內(nèi)容底部時(shí)偎行，反彈川背，如果內(nèi)容比滾動(dòng)視圖是大，那么滾動(dòng)視圖沿著軸滾動(dòng)方向反 彈蛤袒。當(dāng)為假時(shí)熄云，禁用所有反彈，即使alwaysBounce *道具為真妙真。默認(rèn)值為true缴允。

centerContent bool布爾型

????????當(dāng)為真時(shí)，當(dāng)內(nèi)容小于滾動(dòng)視圖邊界時(shí)珍德，滾動(dòng)視圖自動(dòng)的集中內(nèi)容;當(dāng)內(nèi)容大于滾動(dòng)視圖時(shí),該屬性沒(méi)有任何影 響练般。默認(rèn)值是false。

contentContainerStyle StyleSheetPropType(ViewStylePropTypes)

????????這些樣式將應(yīng)用到滾動(dòng)視圖內(nèi)容容器中锈候，內(nèi)容容器包裝了所有的子視圖薄料。例如:

return (<ScrollView?

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

????</ScrollView>??

);?

...

contentInset {頂部:數(shù)字型，左部:數(shù)字型泵琳，底部:數(shù)字型摄职，右部:數(shù)字型}

contentOffset PointPropType

decelerationRate數(shù)字型

????????一個(gè)浮點(diǎn)數(shù)誊役，決定了在用戶移開(kāi)手指后，滾動(dòng)視圖減速有多快谷市。合理的選擇包括——正常:0.998(默認(rèn))——快 速:0.9

horizontal布爾型

????????當(dāng)為真時(shí)蛔垢，滾動(dòng)視圖的子視圖水平排列為一行，而不是豎直排列為一列迫悠。默認(rèn)值是false鹏漆。

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

????????確定鍵盤在響應(yīng)一個(gè)拖動(dòng)時(shí)是否被摒棄甫男。

????——“none”(默認(rèn))，拖動(dòng)沒(méi)有摒棄鍵盤验烧。

????——“onDrag”板驳，當(dāng)拖動(dòng)開(kāi) 始時(shí)鍵盤就被摒棄了。

????——“interactive”碍拆，鍵盤被拖動(dòng)交互式地摒棄并且與觸摸同步移動(dòng);向上拖動(dòng)取消了摒 棄若治。????

keyboardShouldPersistTaps布爾型

????????當(dāng)為假時(shí)，當(dāng)鍵盤向上摒棄鍵盤時(shí)感混，輕擊外部關(guān)注文本輸入端幼。當(dāng)為真時(shí)，滾動(dòng)視圖不會(huì)抓取輕擊弧满，鍵盤不會(huì)自動(dòng) 摒棄婆跑。默認(rèn)值是false。

maximumZoomScale數(shù)字型

????????最大允許縮放比例庭呜。默認(rèn)值是1.0滑进。

minimumZoomScale數(shù)字型

????????最小允許縮放比例。默認(rèn)值是1.0募谎。

onScroll函數(shù)型

onScrollAnimationEnd函數(shù)型

pagingEnabled布爾型

????????當(dāng)為真時(shí)扶关，滾動(dòng)視圖在滾動(dòng)時(shí)會(huì)在滾動(dòng)視圖的尺寸的倍數(shù)上停止?jié)L動(dòng)。這可以用于水平分頁(yè)数冬。默認(rèn)值是false节槐。

removeClippedSubviews布爾型

????????實(shí)驗(yàn): 當(dāng)為真時(shí)，屏幕以外的子視圖(它的overflow值是`hidden )從本地備份的superview中刪除拐纱。這在長(zhǎng) 列表中可以提高滾動(dòng)性能铜异。默認(rèn)值是false。

scrollEnabled布爾型

scrollEventThrottle數(shù)字型

scrollIndicatorInsets {頂部:數(shù)字型秸架，左部:數(shù)字型揍庄，底部:數(shù)字型，右部:數(shù)字型}

scrollsToTop布爾型

????????當(dāng)為真時(shí)咕宿，輕擊狀態(tài)欄滾動(dòng)視圖會(huì)滾動(dòng)到頂部币绩。默認(rèn)值為true蜡秽。

showsHorizontalScrollIndicator布爾型

showsVerticalScrollIndicator布爾型

stickyHeaderIndices [數(shù)字型]

????????一組子視圖表明確定當(dāng)視圖滾動(dòng)時(shí)哪些子視圖會(huì)停靠在屏幕的頂端缆镣。例如芽突，傳遞stickyHeaderIndices = {[0]}將使得第一個(gè)子視圖固定在滾動(dòng)視圖的頂部。此屬性不支持與 horizontal = {true}結(jié)合董瞻。

3.4.2 style

Flexbox...

backgroundColor字符串型

borderBottomColor字符串型

borderColor字符串型

borderLeftColor字符串型

borderRadius數(shù)字型

borderRightColor字符串型

borderTopColor字符串型

opacity數(shù)字型

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

rotation數(shù)字型

scaleX數(shù)字型

scaleY數(shù)字型

shadowColor字符串型

shadowOffset {高:數(shù)字型寞蚌，寬:數(shù)字型}

shadowOpacity數(shù)字型

shadowRadius數(shù)字型

transformMatrix [數(shù)字型]

translateX數(shù)字型

translateY數(shù)字型

zoomScale數(shù)字型 當(dāng)前滾動(dòng)視圖內(nèi)容的規(guī)模。默認(rèn)值是1.0钠糊。

3.5 文本

????????用于顯示文本的響應(yīng)組件挟秤，支持嵌套、樣式和觸發(fā)處理抄伍。在接下來(lái)的例子中艘刚，嵌套的標(biāo)題和正文文本將從style s.baseText繼承FontFamily，但是標(biāo)題會(huì)提供它自己其他的設(shè)計(jì)風(fēng)格截珍。標(biāo)題和正文在文字換行時(shí)會(huì)堆疊在彼此 之上攀甚。

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數(shù)值型

????????用于在計(jì)算文本布局后將文本和省略符號(hào)進(jìn)行截?cái)啵〒Q行岗喉，這樣總的行數(shù)就不會(huì)超過(guò)這個(gè)值秋度。

onPress函數(shù)

????????這個(gè)函數(shù)被稱為按下。在默認(rèn)高亮狀態(tài)下钱床，文本內(nèi)部是支持按下動(dòng)作處理的(該函數(shù)在suppressHighlighting是禁用的)荚斯。

3.5.2 style

View#style...

color字符串型

containerBackgroundColor字符串型

fontFamily字符串型

fontSize數(shù)值型

fontStyle enum('normal', 'italic')

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

lineHeight數(shù)值型

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

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

suppressHighlighting布爾型

????????值為真時(shí)，當(dāng)文本被按下時(shí)沒(méi)有視覺(jué)上的變化查牌。默認(rèn)情況下事期，按下之前是一個(gè)灰色橢圓高亮的文本。

testID字符串型

????????在端到端測(cè)試時(shí)用于定位視圖

描述

3.6 容器

????????元素是與布局設(shè)計(jì)有特定關(guān)系的:內(nèi)部的一切都不再使用flexbox布局而是使用文本布局僧免。這意味著一 個(gè)內(nèi)部的元素不在是矩形的刑赶，而是在結(jié)尾的時(shí)候被包裝起來(lái)。

3.7 有限制性的樣式繼承

????????在網(wǎng)絡(luò)上懂衩，為整個(gè)文檔設(shè)置字體體系和大小的常用方法是:

/* CSS, *not* React Native */

html {

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

? font-size: 11px;

? color: #141823;

}

????????當(dāng)瀏覽器想要顯示一個(gè)文本節(jié)點(diǎn)時(shí)，它會(huì)一直走到樹(shù)的根元素金踪，并且找到一個(gè)有font-size屬性的元素浊洞。該系統(tǒng) 一個(gè)意想不到的性質(zhì)是任何節(jié)點(diǎn)都可以有font-size屬性，包括一個(gè)<div>胡岔。這是為了方便而設(shè)計(jì)的法希，盡管語(yǔ)義 并不是正確的。

????????在React Naitve里靶瘸，我們關(guān)于這一點(diǎn)會(huì)更嚴(yán)格:你必須將<Text>組件里的所有節(jié)點(diǎn)都進(jìn)行包裝;你不能在<View>下直接擁有一個(gè)文本節(jié)點(diǎn)苫亦。

???? // 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>

????????你也失去了對(duì)整個(gè)子樹(shù)設(shè)置字體的能力毛肋。為了在你的應(yīng)用程序里使用一致為字體和大小，推薦使用的方法是創(chuàng)建 一個(gè)包括他們的MyAppText組件屋剑，并且在你的應(yīng)用程序里使用這個(gè)組件润匙。你可以使用該組件來(lái)構(gòu)成更多特定的 組件，比如用于其他類型文本的MyAppHeaderText組件唉匾。

<View>

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

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

</View>

????????React Native還有繼承風(fēng)格的概念孕讳，但是僅限于文本子樹(shù)。在這種情況下巍膘，第二部分將是粗體和紅色厂财。

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

?????? I am bold

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

???????? and red

????</Text>

</Text>

????????我們相信更多的文本約束方法將會(huì)產(chǎn)生更好的應(yīng)用程序:

????? (開(kāi)發(fā)人員)響應(yīng)組件的設(shè)計(jì)源于大腦中孤立的想法:你應(yīng)該有能力將你的組件放置在你應(yīng)用程序的任何一 個(gè)地方，相信只有工具是相同的峡懈，那么它的表現(xiàn)和行為都是相同的璃饱。文本屬性是可以從工具外繼承的，這會(huì) 打破這種孤立肪康。

????? (實(shí)現(xiàn)人員)ReactNative實(shí)現(xiàn)也是很簡(jiǎn)單的帜平。我們不需要對(duì)每一個(gè)單一的元素都要有一個(gè)FontFamily模塊，并且我們?cè)诿恳淮物@示一個(gè)文本節(jié)點(diǎn)時(shí)也不需要對(duì)樹(shù)遍歷到根節(jié)點(diǎn)梅鹦。風(fēng)格的繼承只需要在原生文本內(nèi) 部進(jìn)行編碼裆甩，不需要泄露給其他文本或者是系統(tǒng)本身。

3.8 文本輸入

????????通過(guò)鍵盤將文本輸入到應(yīng)用程序的一個(gè)基本的組件齐唆。屬性提供幾個(gè)功能的可配置性嗤栓，比如自動(dòng)校正，自動(dòng)還 原箍邮，占位符文本茉帅，和不同的鍵盤類型，如數(shù)字鍵盤锭弊。 最簡(jiǎn)單的一個(gè)用例是放置一個(gè)TextInput堪澎，利用Text事件來(lái)讀取用戶的輸入。還有其他的事件可以使用味滞，比如onSubmitEditing和onFocus樱蛤。一個(gè)簡(jiǎn)單的例 子:

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')

????????可以通知文本輸入自動(dòng)利用某些字符。

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

????? words:每一個(gè)單詞的首字母

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

????? none:不會(huì)自動(dòng)使用任何東西

????autoCorrect布爾型

????????如果值為假昨凡，禁用自動(dòng)校正。默認(rèn)值為真蚁署。

????autoFocus布爾型

????????如果值為真便脊，聚焦componentDidMount上的文本。默認(rèn)值為假光戈。

????bufferDelay數(shù)值型

????????這個(gè)會(huì)幫助避免由于JS和原生文本輸入之間的競(jìng)態(tài)條件而丟失字符哪痰。默認(rèn)值應(yīng)該是沒(méi)問(wèn)題的遂赠，但是如果你每一 個(gè)按鍵都操作的非常緩慢仗谆，那么你可能想嘗試增加這個(gè)兑凿。

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

????????清除按鈕出現(xiàn)在文本視圖右側(cè)的時(shí)機(jī)

????controlled布爾型

????????如果你真想要它表現(xiàn)成一個(gè)控制組件并思，你可以將它的值設(shè)置為真哗魂，但是按下按鍵怀偷，并且/或者緩慢打字抄瓦，你可能會(huì) 看到它閃爍济竹，這取決于你如何處理onChange事件伟恶。

????editable布爾型

????????如果值為假惋啃，文本是不可編輯的哼鬓。默認(rèn)值為真。

????enablesReturnKeyAutomatically布爾型

????????如果值為真边灭，當(dāng)沒(méi)有文本的時(shí)候鍵盤是不能返回鍵值的异希，當(dāng)有文本的時(shí)候會(huì)自動(dòng)返回。默認(rèn)值為假绒瘦。

????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")

????????決定打開(kāi)哪種鍵盤称簿，例如，數(shù)字鍵盤惰帽。

????multiline布爾型

????????如果值為真憨降，文本輸入可以輸入多行。默認(rèn)值為假该酗。

????onBlur函數(shù)

????????當(dāng)文本輸入是模糊的授药，調(diào)用回調(diào)函數(shù)

????onChange函數(shù)

????????當(dāng)文本輸入的文本發(fā)生變化時(shí)，調(diào)用回調(diào)函數(shù)

????onChangeText函數(shù)

????onEndEditing函數(shù)

????onFocus函數(shù)

????????當(dāng)輸入的文本是聚焦?fàn)顟B(tài)時(shí)呜魄，調(diào)用回調(diào)函數(shù)

????onSubmitEditing函數(shù)

????password布爾型

????????如果值為真悔叽，文本輸入框就成為一個(gè)密碼區(qū)域。默認(rèn)值為假爵嗅。

????placeholder字符串型

????????在文本輸入之前字符串將被呈現(xiàn)出來(lái)

????placeholderTextColor字符串型

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

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

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

????secureTextEntry布爾型

????????如果值為真娇澎，文本輸入框就會(huì)使輸入的文本變得模糊，以便于像密碼這樣敏感的文本保持安全睹晒。默認(rèn)值為假趟庄。

????selectionState文檔選擇狀態(tài)

????????見(jiàn)DocumentSelectionState.js，一些狀態(tài)是為了維護(hù)一個(gè)文檔的選擇信息册招。

3.8.2 styleText#style

testID字符串型

????用于端對(duì)端測(cè)試時(shí)定位視圖岔激。

value字符串型

????文本輸入的默認(rèn)值

3.9 高亮觸摸

????????一個(gè)包裝器是為了讓視圖對(duì)觸發(fā)做出合適的響應(yīng)。按下按鈕是掰，包裝后的視圖的透明性就會(huì)降低，這樣底襯的顏色就會(huì)顯示出來(lái)辱匿，使視圖顏色變暗或者著色键痛。底襯的出現(xiàn)是因?yàn)橄蛞晥D層次結(jié)構(gòu)添加了一個(gè)視圖炫彩，如果使用不正確的話，這有時(shí)候會(huì)導(dǎo)致不必要的認(rèn)為視覺(jué)效果絮短，例如江兢，如果包裝了的視圖的背景顏色不是很明確的設(shè)置成一個(gè)不透明的顏色。

3.9.1 屬性

????activeOpacity數(shù)值型

????????當(dāng)觸發(fā)處于活躍狀態(tài)時(shí)丁频，確定包裝后的使徒的不透明度杉允。

????style View#style

????????underlayColor字符串型 當(dāng)觸發(fā)處于活躍狀態(tài)時(shí)，底襯的顏色會(huì)顯示出來(lái)席里。

3.10 不透明觸摸

????????一個(gè)包裝器是為了讓視圖對(duì)觸發(fā)做出合適的響應(yīng)叔磷。按下按鈕，包裝后的視圖的透明性就會(huì)降低奖磁，變暗改基。這個(gè)動(dòng)作的完成實(shí)際上并沒(méi)有改變視圖的層次，一般來(lái)說(shuō)很容易添加到一個(gè)應(yīng)用程序咖为，并且不會(huì)產(chǎn)生奇怪的副作用秕狰。????????

3.10.1 屬性

????activeOpacity數(shù)值

????????當(dāng)觸發(fā)處于活躍狀態(tài)時(shí)，確定包裝后的使徒的不透明度躁染。

3.11 無(wú)反饋觸摸

3.11.1 成員函數(shù)

????onLongPress函數(shù)

????onPress函數(shù)

????????釋放觸摸時(shí)該函數(shù)被調(diào)用,但如果觸摸被取消則不調(diào)用(例如被竊取了應(yīng)答器鎖的滾動(dòng)取消)鸣哀。

????onPressIn函數(shù)

????onPressOut函數(shù)

3.12 視圖

????????創(chuàng)建UI最基本的組件，view是一個(gè)容器吞彤，它支持flexbox布局我衬、風(fēng)格、一些觸發(fā)處理备畦，和可訪問(wèn)性控制低飒，它被設(shè)計(jì)成嵌套在其他視圖里，并且有0到很多個(gè)任意類型的孩子懂盐。view直接映射到原生視圖褥赊，相當(dāng)于在任意正在運(yùn)行的平臺(tái)上的響應(yīng)，不管它是UIView莉恼，<div>拌喉，android.view，等等俐银。這個(gè)例子創(chuàng)建了一個(gè)視圖尿背，將兩個(gè) 顏色的框和自定義的組件打包填充成一行。

3.12.1 屬性

????accessibilityLabel字符串型

????????當(dāng)用戶與元素進(jìn)行交互時(shí)捶惜，覆蓋通過(guò)屏幕閱讀器閱讀的文本田藐。在默認(rèn)情況下，標(biāo)簽是通過(guò)遍歷所有孩子和累積所有由空間隔開(kāi)的文本節(jié)點(diǎn)創(chuàng)建的。

????accessible布爾型

????????當(dāng)它的值為真時(shí)汽久，說(shuō)明視圖是一個(gè)可訪問(wèn)的元素鹤竭。在默認(rèn)情況下，所有的可觸發(fā)的元素都是可以被訪問(wèn)的景醇。

????onMoveShouldSetResponder函數(shù)

????????對(duì)于大多數(shù)的觸發(fā)交互臀稚，你可能只是想在TouchableHighlight或者TouchableOpacity里包裝你的組件。為了 進(jìn)一步的探討三痰，檢查Touchable.js吧寺，ScrollResponder.js和ResponderEventPlugin.js。

????onResponderGrant函數(shù)

????onResponderMove函數(shù)

????onResponderReject函數(shù)

????onResponderRelease函數(shù)

????onResponderTerminate函數(shù)

????onResponderTerminationRequest函數(shù)

????onStartShouldSetResponder函數(shù)

????onStartShouldSetResponderCapture函數(shù)

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

????????缺乏auto屬性散劫，none更像是CSS的none值稚机。box-none就好像你已經(jīng)應(yīng)用了CSS類:

.box-none {

??pointer-events: none;

?}

?.box-none * {

??pointer-events: all;

?}

box-only相當(dāng)于

.box-only {

??pointer-events: all;

?}

?.box-only * {

?? pointer-events: none;

?}

????????但是由于pointerEvents并不影響布局/外觀，通過(guò)添加附加模式舷丹，我們已經(jīng)偏離了規(guī)范抒钱，我們選擇在style上不包括pointerEvents。在一些平臺(tái)上颜凯，不管怎樣偶們都需要將它作為一個(gè)className來(lái)實(shí)現(xiàn)谋币。是否使用style時(shí)這個(gè)平臺(tái)的實(shí)現(xiàn)細(xì)節(jié)。

removeClippedSubviews布爾

????????這是一個(gè)通過(guò)RCTView顯示的特定性能屬性症概，當(dāng)有很多子視圖蕾额，并且它們大部分都是在幕后，這時(shí)被用于滾動(dòng)內(nèi)容彼城。為了使這個(gè)屬性有效诅蝶，它必須被應(yīng)用到一個(gè)視圖中，在這個(gè)視圖里包含很多子視圖和外部約束募壕。子視圖中還應(yīng)該有溢出:隱藏调炬，應(yīng)該包含視圖(或者它的一個(gè)子視圖)。

style字體

backgroundColor字符串

borderBottomColor字符串

borderColor字符串

borderLeftColor字符串

borderRadius數(shù)值

borderRightColor字符串

borderTopColor字符串

opacity數(shù)值

overflow enum('visible', 'hidden')

rotation數(shù)值

scaleX數(shù)值

scaleY數(shù)值

shadowColor字符串

shadowOffset {h: number, w: number}

shadowOpacity數(shù)值

shadowRadius數(shù)值

transformMatrix [數(shù)值]

translateX數(shù)值

translateY數(shù)值

testID字符串型

????????在端到端測(cè)試中用于定位視圖

3.13 Web視圖

3.13.1 屬性

automaticallyAdjustContentInset布爾型

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

html字符串型

onNavigationStateChange函數(shù)

renderError函數(shù)

renderLoading函數(shù)

shouldInjectAJAXHandler布爾型

startInLoadingState布爾型

style View#style

url字符串型

4 資源加載

4.1 靜態(tài)資源

????????在項(xiàng)目的進(jìn)程中舱馅，添加并且移除和處理那些在應(yīng)用程序不是經(jīng)常使用的圖片是很常見(jiàn)的情況缰泡。為了處理這種情 況，我們需要找到一個(gè)方法來(lái)靜態(tài)地定位那些被用在應(yīng)用程序里的圖片代嗤。因此棘钞，我們使用了一個(gè)標(biāo)記器。唯一允 許的指向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} />

????????當(dāng)主要的代碼執(zhí)行到這里宜猜，你就可以做一些有趣的事情，比如自動(dòng)將那些用于應(yīng)用程序的assets打包硝逢。注 意姨拥，這些代碼不是強(qiáng)制實(shí)施的绅喉，但不代表將來(lái)也不會(huì)。

4.1.1 使用Images.xcassets將靜態(tài)資源添加到你的iOS應(yīng)用程序中

NOTE: 生成應(yīng)用程序所需的新資源

????????無(wú)論在什么時(shí)候垫毙，您想把新的資源添加到Images.xcassets中霹疫，您都需要在使用它之前通過(guò)Xcode來(lái)重新構(gòu) 建您的應(yīng)用程序 — — 僅在模擬器內(nèi)重新加載它是不夠的拱绑。

????????這一進(jìn)程正在被改進(jìn)综芥，不久就會(huì)提供更好的工作流程。

4.1.2 將靜態(tài)資源添加到您的Android應(yīng)用程序中

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

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

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

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

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

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

????NOTE:生成應(yīng)用程序所需的新資源

????????無(wú)論在什么時(shí)候您把新的資源添加到您的畫板中您都需要在使用它之前通過(guò)運(yùn)行react-nativerun-android重新構(gòu)建您的應(yīng)用程序-僅重新加載JS是不夠的虾啦。

????????這一進(jìn)程正在被改進(jìn)，不久就會(huì)提供更好的工作流程痕寓。

4.2 網(wǎng)絡(luò)資源

????????在您進(jìn)行編譯的時(shí)候傲醉，許多您的應(yīng)用程序中需要展示的圖片都不能使用，或者你會(huì)想要通過(guò)加載一些動(dòng)態(tài)圖片來(lái)保持二進(jìn)制大小在較低的狀態(tài)呻率。不像靜態(tài)資源那樣硬毕，您將需要手動(dòng)指定圖像的尺寸。????

// 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 本地文件系統(tǒng)資源

????????請(qǐng)?jiān)?CameraRoll 中查看使用 Images.xcassets 之外的本地資源示例 礼仗。

4.4 Source是一個(gè)對(duì)象類型

????????在ReactNative中吐咳，一個(gè)有趣的決定是src特性將會(huì)被命名為source，并且不作為一個(gè)字符串而是一個(gè)uri特性的對(duì)象類型元践。

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

????????站在底層來(lái)看韭脊，這樣做的原因是它允許將元數(shù)據(jù)依附到這個(gè)對(duì)象中。舉個(gè)例子单旁，你正在使用require('image!icon')沪羔，我們將添加isStatic作為一個(gè)flag來(lái)標(biāo)識(shí)本地文件(不要依賴這例子，將來(lái)這可能會(huì)改變!)慎恒。這在 將來(lái)同時(shí)也會(huì)成為可能任内，比如我們可能會(huì)支持子畫面，并用它來(lái)取代輸出{uri: ...}融柬，我們可以輸出{uri: ..., crop: {left: 10, top:50, width: 20, height: 40}}同時(shí)支持在所有已經(jīng)存在的網(wǎng)站中透明地顯示子畫 面死嗦。

????????在用戶角度上，這會(huì)讓你用有用的特性比如圖片的幾何尺寸來(lái)注釋對(duì)象類型粒氧，從而計(jì)算出將要顯示出來(lái)的尺寸越除。盡情地使用這種數(shù)據(jù)類型來(lái)儲(chǔ)存你的圖片吧。

4.5 背景圖片疊加

return (

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

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

????</Image>

);

4.6 非主線程加載

????????圖片的解析會(huì)花費(fèi)很多的時(shí)間。這是導(dǎo)致網(wǎng)頁(yè)的幀數(shù)下降的其中一個(gè)重要的原因摘盆，因?yàn)榻馕龉ぷ鲿?huì)被執(zhí)行在主線 程中翼雀。在React Native中，圖片的解析會(huì)在不同的線程中執(zhí)行孩擂。在實(shí)際操作中狼渊，你已經(jīng)處理好這種情況，當(dāng)圖 片還沒(méi)有下載完成类垦，因此需要將placeholder顯示出來(lái)狈邑，這不用你寫任何代碼。????

4.7 應(yīng)用程序注冊(cè)表

????????AppRegistry是運(yùn)行所有ReactNative應(yīng)用程序的JS入口點(diǎn)蚤认。應(yīng)用程序跟組件需要通過(guò)AppRegistry.registerComponent來(lái)注冊(cè)它們自身米苹，然后本地系統(tǒng)就可以加載應(yīng)用程序的包，再然后當(dāng)AppRegistry.runApplication準(zhǔn)備就緒后就可以真正的運(yùn)行該應(yīng)用程序了砰琢。

????????AppRegistry在require序列里是required蘸嘶，確保在其他模塊被需要之前JS執(zhí)行環(huán)境已經(jīng)被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)