基础组件(二)

1.MapView

显示地图的组件

属性

ios annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] 

地图上的标注点，可以带有标题及副标题。

ios mapType enum('standard', 'satellite', 'hybrid') 

要显示的地图类型。

• standard: 标准道路地图（默认）。
• satellite: 卫星视图。
• hybrid: 卫星视图并附带道路和感兴趣的点标记。

ios maxDelta number 

可以被显示的最大区域尺寸。

ios minDelta number 

可以被显示的最小区域尺寸。

onAnnotationPress function 

当用户点击地图上的标注之后会调用此回调函数一次。

region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} 

地图显示的区域。

区域使用中心的坐标和要显示的范围来定义。

zoomEnabled bool 

如果此属性为false，用户则不能旋转/缩放地图。默认值为true。

2.Modal

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

在从根视图开始就使用RN编写的应用中，你应该使用Navigator来代替Modal。通过一个最顶层的Navigator，你可以通过configureScene属性更加方便的控制如何将模态场景覆盖显示在你App其余的部分上。

目前这个组件还只能在iOS上使用。

3.Navigator

导航器通过路由对象来分辨不同的场景。利用renderScene方法，导航栏可以根据指定的路由来渲染场景。

可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。查看Navigator.SceneConfigs来获取默认的动画和更多的场景配置选项。

基本用法

Navigator 折叠源码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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();           }         }}       />     }   />

导航方法

• getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
• jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
• jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
• jumpTo(route) - 跳转到已有的场景并且不卸载。
• push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
• pop() - 跳转回去并且卸载掉当前场景
• replace(route) - 用一个新的路由替换掉当前场景
• replaceAtIndex(route, index) - 替换掉指定序列的路由场景
• replacePrevious(route) - 替换掉之前的场景
• immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
• popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。
• popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。

属性

configureScene function 

可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

initialRoute object 

定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。

initialRouteStack [object] 

提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。

navigationBar node 

可选参数，提供一个在场景切换的时候保持的导航栏。

navigator object 

可选参数，提供从父导航器获得的导航器对象。

renderScene function 

必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。

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

sceneStyle View#style 

将会应用在每个场景的容器上的样式。

详细用法：http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B

4.Picker

本组件可以在iOS和Android上渲染原生的选择器（Picker）。用例：

Picker 折叠源码

1 2 3 4 5 6

<Picker   selectedValue={this.state.language}   onValueChange={(lang) => this.setState({language: lang})}>   <Picker.Item label="Java" value="java" />   <Picker.Item label="JavaScript" value="js" /> </Picker>

属性

onValueChange function 

某一项被选中时执行此回调。调用时带有如下参数：

• itemValue: 被选中项的value属性
• itemPosition: 被选中项在picker中的索引位置

selectedValue any 

默认选中的值。可以是字符串或整数。

style pickerStyleType 

testID string 

用于在端对端测试中定位此视图。

android enabled bool 

如果设为false，则会禁用此选择器。

android mode enum('dialog', 'dropdown') 

在Android上，可以指定在用户点击选择器时，以怎样的形式呈现选项：

• dialog（对话框形式）: 显示一个模态对话框。默认选项。
• dropdown（下拉框形式）: 以选择器所在位置为锚点展开一个下拉框。

android prompt string 

设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。

ios itemStyle itemStylePropType 

指定应用在每项标签上的样式。

5.Switch

跨平台通用的可以在两个状态中切换的组件。

属性

disabled bool 

如果为true，这个组件不能进行交互。

onValueChange function 

当值改变的时候调用此回调函数，参数为新的值。

testID string 

用来在端到端测试中定位此视图。

value bool 

表示此开关是否打开。默认为false（关闭状态）。

ios onTintColor ColorPropType 

开启状态时的背景颜色。

ios thumbTintColor ColorPropType 

开关上圆形按钮的背景颜色。

ios tintColor ColorPropType 

关闭状态时的背景颜色。

6.RefreshControl

这一组件用在ScrollView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。

属性

onRefresh function 

在视图开始刷新时调用。

refreshing bool 

视图是否应该在刷新时显示指示器。

android colors [ColorPropType] 

指定至少一种颜色用来绘制刷新指示器。

android enabled bool 

指定是否要开启刷新指示器。

android progressBackgroundColor ColorPropType 

指定刷新指示器的背景色。

android size RefreshLayoutConsts.SIZE.DEFAULT 

指定刷新指示器的大小，具体数值可参阅RefreshControl.SIZE.

ios tintColor ColorPropType 

指定刷新指示器的颜色。

ios title string 

指定刷新指示器下显示的文字。