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来获取默认的动画和更多的场景配置选项。

基本用法

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到栈中的第一个场景,卸载掉所有的其他场景。

属性

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 

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

详细用法: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>

属性

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 

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

喜欢这篇文章?欢迎打赏~~

基础组件(二)

 

相关文章:

  • 2022-03-06
  • 2022-12-23
  • 2021-09-04
  • 2021-04-18
  • 2021-12-19
  • 2021-05-04
  • 2021-04-07
  • 2021-07-28
猜你喜欢
  • 2022-12-23
  • 2021-04-08
  • 2022-02-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案