1.MapView
显示地图的组件
属性
[{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}]
地图上的标注点,可以带有标题及副标题。
enum('standard', 'satellite', 'hybrid')
要显示的地图类型。
- standard: 标准道路地图(默认)。
- satellite: 卫星视图。
- hybrid: 卫星视图并附带道路和感兴趣的点标记。
number
可以被显示的最大区域尺寸。
number
可以被显示的最小区域尺寸。
function
当用户点击地图上的标注之后会调用此回调函数一次。
{latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number}
地图显示的区域。
区域使用中心的坐标和要显示的范围来定义。
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来获取默认的动画和更多的场景配置选项。
基本用法
导航方法
- getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。
- jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
- jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
- jumpTo(route) - 跳转到已有的场景并且不卸载。
- push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
- pop() - 跳转回去并且卸载掉当前场景
- replace(route) - 用一个新的路由替换掉当前场景
- replaceAtIndex(route, index) - 替换掉指定序列的路由场景
- replacePrevious(route) - 替换掉之前的场景
- immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
- popToRoute(route) - pop到路由指定的场景,其他的场景将会卸载。
- popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。
属性
function
可选的函数,用来配置场景动画和手势。会带有两个参数调用,一个是当前的路由,一个是当前的路由栈。然后它应当返回一个场景配置对象
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
object
定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。
[object]
提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性,它将被默认设置成一个只含有initialRoute的数组。
node
可选参数,提供一个在场景切换的时候保持的导航栏。
object
可选参数,提供从父导航器获得的导航器对象。
function
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
(route, navigator) =>
<MySceneComponent title={route.title} navigator={navigator} />
View#style
将会应用在每个场景的容器上的样式。
4.Picker
本组件可以在iOS和Android上渲染原生的选择器(Picker)。用例:
属性
function
某一项被选中时执行此回调。调用时带有如下参数:
-
itemValue: 被选中项的value属性 -
itemPosition: 被选中项在picker中的索引位置
any
默认选中的值。可以是字符串或整数。
pickerStyleType
string
用于在端对端测试中定位此视图。
bool
如果设为false,则会禁用此选择器。
enum('dialog', 'dropdown')
在Android上,可以指定在用户点击选择器时,以怎样的形式呈现选项:
-
dialog(对话框形式): 显示一个模态对话框。默认选项。 -
dropdown(下拉框形式): 以选择器所在位置为锚点展开一个下拉框。
string
设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。
itemStylePropType
指定应用在每项标签上的样式。
5.Switch
跨平台通用的可以在两个状态中切换的组件。
属性
bool
如果为true,这个组件不能进行交互。
function
当值改变的时候调用此回调函数,参数为新的值。
string
用来在端到端测试中定位此视图。
bool
表示此开关是否打开。默认为false(关闭状态)。
ColorPropType
开启状态时的背景颜色。
ColorPropType
开关上圆形按钮的背景颜色。
ColorPropType
关闭状态时的背景颜色。
6.RefreshControl
这一组件用在ScrollView内部,为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置(scrollY: 0),此时下拉会触发一个onRefresh事件。
属性
function
在视图开始刷新时调用。
bool
视图是否应该在刷新时显示指示器。
[ColorPropType]
指定至少一种颜色用来绘制刷新指示器。
bool
指定是否要开启刷新指示器。
ColorPropType
指定刷新指示器的背景色。
RefreshLayoutConsts.SIZE.DEFAULT
指定刷新指示器的大小,具体数值可参阅RefreshControl.SIZE.
ColorPropType
指定刷新指示器的颜色。
string
指定刷新指示器下显示的文字。
喜欢这篇文章?欢迎打赏~~