React-Native的API和组件

在学习了React-Native的搭建以后，然后就在网上找了一些Demo来学习，并且开始练习。

官网：https://reactnative.cn/docs/0.46/getting-started.html
几个Demo链接：
GankIO

运行的步骤：

  1. git clone https://github.com/wangdicoder/react-native-Gank
  2. cd react-native-Gank
  3. npm install
  4. react-native link (this step is for add the icon component)
  5. react-native run-android / run-ios

常用组件

View组件

类似于div的组件就是View容器组件，视图布局都是用它，支持flexbox的布局。

Text组件

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。有onPress事件，可以给text组件绑定触摸点击事件。

TextInput组件

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

Touchable组件

TouchableHighlight

高亮触摸，用户点击的时候会产生高亮的效果。

TouchableOpacity

透明触摸，用户点击时，点击的组件会出现透明过度的效果。
activeOpacity number
指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）。

TouchableWithoutFeedback

一般不要使用。

对UIKit Navigation的封装，实质就是调用了这个。属性：

  1. barTintColor：导航条的背景颜色
  2. initialRoute:初始化路由
  3. itemWrapperStyle:设置每个页面的背景颜色
  4. navigationHidden:是否隐藏阴影
  5. tintColor:导航条上的按钮的颜色的设置
  6. titleTextColor：导航栏上字体的颜色
  7. translucent：导航条是否是半透明的
  8. push到新的页面
  9. pop返回
  10. replace替换当前路由
  11. replacePrevious(route)替换前一个页面的视图并且回退过去
  12. resetTo(reset)取代最顶层的路由并且回退过去
  13. popToTop：回到最上层的视图

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default class App extends React.Component{
    render(){
        return(
            <Provider store={store}>
                <Navigator
                    initialRoute={{component: MainPage}}
                    renderScene={(route, navigator) =>
                        <route.component {...route.args} navigator={navigator} />
                    }
                />
            </Provider>
        );
    }

    componentDidMount(){
        SplashScreen.hide();
    }
}

TabBarIOS组件

有TabBarIOS和TabBarIOS.item两种，后者是前者的附属组件。
TabBarIOS属性：

  1. barTintColor：标签栏的背景颜色。
  2. tintColor:当前被选中的标签图标的颜色。
  3. unselectedItemTintColor string
    当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效.
  4. translucent bool 一个布尔值，决定标签栏是否需要半透明化。

TabBarIOS.Item属性：

  1. badge：在图标右上角显示一个红色的气泡。
  2. icon 给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略。
  3. onPress 当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。
  4. selected 这个属性决定了子视图是否可见。
  5. selectedIcon 当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。
  6. systemIcon enum(‘bookmarks’, ‘contacts’, ‘downloads’, ‘favorites’, ‘featured’, ‘history’, ‘more’, ‘most-recent’, ‘most-viewed’, ‘recents’, ‘search’, ‘top-rated’) 一些预定义的系统图标。注意如果你使用了此属性，标题和自定义图标都会被覆盖为系统定义的值。
  7. title在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略。

Image

一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。详细用法参阅图片文档。
resizeMode enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)
决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

FlatList

高性能的简单列表组件，支持下面这些常用的功能：

  • 完全跨平台。
  • 支持水平布局模式。
  • 行组件显示或隐藏时可配置回调事件。
  • 支持单独的头部组件。
  • 支持单独的尾部组件。
  • 支持自定义行间分隔线。
  • 支持下拉刷新。
  • 支持上拉加载。
  • 支持跳转到指定行（ScrollToIndex）。
    如果需要分组/类/区（section），请使用。

    WebView

    创建一个原生的WebView，可以用于访问一个网页。
    属性：
  1. onError 加载失败时调用。
  2. onLoad 加载成功时调用。
  3. onLoadEnd 加载结束时（无论成功或失败）调用。
  4. onLoadStart 加载开始时调用。
  5. onMessage 在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。 设置此属性的同时会在webview中注入一个postMessage的全局函数并覆盖可能已经存在的同名实现。
    网页端的window.postMessage只发送一个参数data，此参数封装在RN端的event对象中，即event.nativeEvent.data。data 只能是一个字符串。
  6. injectedJavaScript 设置在网页加载之前注入的一段JS代码。

API

AppRegistry

其中iOS代码的入口在index.ios.js中，
在index.ios.js中注册入口：

AppRegistry.registerComponent('GankIO', () => App);当注册完应用程序组件后，Native的系统就会加载jsbundle文件并且触发AppRegistry.runApplication运行程序。AppRegistry有以下的方法：

  1. registerConfig:静态方法，注册配置
  2. registerComponent注册入口组件
  3. registerRunnable：注册函数监听
  4. getAppKey:获取registerRunnable注册的监听键
  5. runApplication运行程序

AlertIOS

启动一个提示对话框，包含对应的标题和信息。

你还可以指定一系列的按钮，点击对应的按钮会调用对应的onPress回调并且关闭提示框。默认情况下，对话框会仅有一个’确定’按钮。

PixelRatio

告知开发者像素的密度。
根据像素密度获取指定大小的图片。
像素网格对齐。

AppState

AppState能告诉你应用当前是在前台还是在后台，并且能在状态变化的时候通知你。

AppState通常在处理推送通知的时候用来决定内容和对应的行为。
active - 应用正在前台运行
background - 应用正在后台运行。用户既可能在别的应用中，也可能在桌面。
inactive - 此状态表示应用正在前后台的切换过程中，或是处在系统的多任务视图，又或是处在来电状态中。

CameraRoll

CameraRoll模块提供了访问本地相册的功能。在iOS上使用这个模块之前，你需要先链接RCTCameraRoll库。
从iOS10开始，访问相册需要用户授权。你需要在Info.plist中添加一条名为NSCameraUsageDescription的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在Xcode中实际会显示为Privacy - Camera Usage Description。

  1. static saveImageWithTag(tag)
    保存一个图片到相册。
  2. static saveToCameraRoll
  3. getPhotos(params: object)
    返回一个带有图片标识符对象的Promise。

Geolocation

你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段来启用定位功能。如果你使用react-native init创建项目，定位会被默认启用。
属性：

  1. getCurrentPosition(geo_success: Function, geo_error?: Function, geo_options?: GeoOptions) 获取当前位置，
    成功时会调用geo_success回调，参数中包含最新的位置信息。

  2. watchPosition(success: Function, error?: Function, options?: GeoOptions) 持续监听位置，每当位置变化之后都调用success回调。支持的选项：timeout (ms), maximumAge (ms), enableHighAccuracy (bool)

  3. static clearWatch(watchID: number) 依据ID清除检测

  4. stopObserving()停止检测

AsyncStorage

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。

每个方法都有一个回调函数，回调函数的第一个参数都是错误对象，如果发生错误就会展示错误对象，否则为null。所有方法执行后，都会返回一个Promise对象。
方法：

  1. static getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void)
    根据键来获取值，获取的结果会在回调函数，第一个

  2. static setItem(key: string, value: string, callback?: ?(error: ?Error) => void) 设置键值对

  3. static removeItem(key: string, callback?: ?(error: ?Error) => void)
    根据键值移除对象
  4. static mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void) 合并现有值和输入值。
  5. static clear(callback?: ?(error: ?Error) => void) qing
  6. static getAllKeys(callback?: ?(error: ?Error, keys: ?Array) => void)
    获取所有的键。
  7. static flushGetRequests() 清除所有进行中的查询操作。

  8. static multiGet(keys: Array, callback?: ?(errors: ?Array, result: ?Array<Array>) => void)
    获取多项
    multiGet([‘k1’, ‘k2’], cb) -> cb([[‘k1’, ‘val1’], [‘k2’, ‘val2’]])

  9. static multiSet(keyValuePairs: Array<Array>, callback?: ?(errors: ?Array) => void)
    设置多项。

  10. multiSet和multiMerge都接受一个与multiGet输出值一致的key-value数组的数组。返回一个Promise对象。

multiSet([[‘k1’, ‘val1’], [‘k2’, ‘val2’]], cb);

  1. static multiRemove(keys: Array, callback?: ?(errors: ?Array) => void)

删除所有键在keys数组中的数据。返回一个Promise对象。

  1. static multiMerge(keyValuePairs: Array<Array>, callback?: ?(errors: ?Array) => void) 多个键值对合并。

还没有被所有原生实现都支持。

定时器

setTimeout

用于设定一个定时任务

setInterval

主要用于设定循环

setImmediate

用于设置立即执行的任务

网络数据请求

XMLHttpRequest(即俗称的ajax)

与web的一样，

Fetch

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

本文标题:React-Native的API和组件

文章作者:向阳

发布时间:2017年03月10日 - 17时09分

最后更新:2018年07月18日 - 09时41分

原始链接:http://peilinghui.com/2017/03/10/React-Native的API和组件/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 常用组件
    1. 1.0.1. View组件
    2. 1.0.2. Text组件
    3. 1.0.3. TextInput组件
    4. 1.0.4. Touchable组件
      1. 1.0.4.1. TouchableHighlight
      2. 1.0.4.2. TouchableOpacity
      3. 1.0.4.3. TouchableWithoutFeedback
    5. 1.0.5. NavigatorIOS组件
    6. 1.0.6. TabBarIOS组件
    7. 1.0.7. Image
    8. 1.0.8. FlatList
    9. 1.0.9. WebView
  • 2. API
    1. 2.0.1. AppRegistry
    2. 2.0.2. AlertIOS
    3. 2.0.3. PixelRatio
    4. 2.0.4. AppState
    5. 2.0.5. CameraRoll
    6. 2.0.6. Geolocation
    7. 2.0.7. AsyncStorage
    8. 2.0.8. 定时器
      1. 2.0.8.1. setTimeout
      2. 2.0.8.2. setInterval
      3. 2.0.8.3. setImmediate
  • 2.1. 网络数据请求
    1. 2.1.1. XMLHttpRequest(即俗称的ajax)
    2. 2.1.2. Fetch
    • 本站总访问量17953次 13491 , 本页阅读量: 27