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字符串型

        在端到端测试时用于定位视图

描述

href="https://github.com/facebook/react-native/blob/master/docs/Text.md"

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)