Alert - 弹窗
通过 Alert.alert() 方法调用唤起原生弹窗，点击会触发 onPress 回调（参考下方代码）并清除弹窗。
import React, {
AppRegistry,
Component,
StyleSheet,
Alert,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
componentDidMount(){
Alert.alert(
'Alert标题',
'一些正文内容',
[
//{text: '稍后询问', onPress: () => console.log('Ask me later pressed')},
//{text: '取消', onPress: () => console.log('Cancel Pressed')},
{text: 'OK', onPress: () => console.log('OK Pressed')}
]
)
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
DEMO
</Text>
</View>
);
}
}
按钮数量将决定其排版（下图），不同于ios，安卓无法定义按钮样式：
（单个按钮情况）
（两个按钮情况）
（三个按钮情况）
Animated - 动画接口
篇幅较大，故独立写了两篇文章：
AppRegistry - APP注册接口
最常用的接口，特别是 AppRegistry.registerComponent 方法，用于注册根组件到当前APP，进而让原生系统加载时可以执行对应的bundle文件：
AppRegistry.registerComponent('AppName', () => RootComponent);
除了 registerComponent 之外，还提供了其它一些比较少用的接口：
registerConfig(config<Array>) //注册配置
registerRunnable(appKey<String>, func<Function>) //注册函数监听
getAppKeys() //获取registerRunnable注册的监听键
runApplication(appKey<String>, appParams<any>) //运行App
AppState - 应用状态
通过此接口可以获悉应用在当前处于后台还是前台激活的状态，常用方法和应用场景类似于h5的visibilitychange。
注意该接口要最新版本（2.0+）的 react-native 才能调用。
获取到的应用状态常规有：
active：表示应用处于前台运行状态；
background：表示应用处于后台挂起状态；
inactive：过渡状态，常规不会发生，可以先忽略该状态。
我们可以使用 AppState.addEventListener 和 AppState.removeEventListener 方法来监听、移除应用状态的 change 事件。
另外也可以直接使用 AppState.currentState 来获得应用当前的状态：
import React, {
AppRegistry,
Component,
StyleSheet,
Alert,
AppState,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
//组件挂载时获取当前状态
Alert.alert('当前状态', AppState.currentState, [{text: 'OK'}]);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange(currentAppState) {
currentAppState==='active' && Alert.alert('状态转变', currentAppState, [{text: 'OK'}])
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
DEMO
</Text>
</View>
);
}
}
注：如果在模拟器中出现“screenPhysicalPixels undefined”的问题，试着执行 react-native upgrade 来更新gradle（见此issue）
AsyncStorage - 异步存储
类似于 localStorage，常用于本地存储一些键值对类型的数据，这些存储的数据对应整个应用本身而已是全局性质的（类似 localStorage 在同个域下共享）。
其对外方法主要有：
getItem(key<String>, [callback<Function(error, result)>])
获取单个数据，返回一个 Promise 对象 setItem(key<String>, [callback<Function(error)>])
设置单个数据，返回一个 Promise 对象 removeItem(key<String>, [callback<Function(error)>])
移除单个数据，返回一个 Promise 对象 mergeItem(key<String>, value<String>, [callback<Function(error)>])
合并某个已存在的数据项，通常该项为stringified json格式。该接口返回一个 Promise 对象 clear([callback<Function(error)>])
清除全部 AsyncStorage 数据，返回一个 Promise 对象 getAllKeys(callback<Function(error, keys)>)
获取所有键，返回一个 Promise 对象
flushGetRequests() 清空所有进行中的查询 multiGet(keys<Array>, [callback<Function(error, keys)>])
获取多项，查询 keys（字符串数组）指定的多个键来查询对应的值。该接口返回一个 Promise 对象 multiGet(keys<Array>, [callback<Function(error, keyValuePairs)>])
获取多项，参数 keys 是一个字符串数组，回调里的形参 keyValuePairs 是字符串的二维数组，表示最终获得的键值对组。该接口返回一个 Promise 对象 multiSet(keyValuePairs<Array>, [callback<Function(error, keys)>])
设置多项，参数 keyValuePairs 是字符串的二维数组。该接口返回一个 Promise 对象 multiRemove(keys<Array>, [callback<Function(error)>])
移除 keys（字符串数组）指定的多项。返回一个 Promise 对象 multiMerge(keyValuePairs<Array>, [callback<Function(error)>])
合并多项已有的键值对，参数 keyValuePairs 是字符串的二维数组。该接口返回一个 Promise 对象。注意该接口还不完善，未能被所有原生支持。
先来看一个简单的 AsyncStorage 数据设置与获取：
import React, {
AppRegistry,
Component,
StyleSheet,
Alert,
AsyncStorage,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
time : '123'
};
}
componentDidMount() {
AsyncStorage.setItem('timeStamp', Date.now() + '', function(err){
//错误处理
err && console.log(err)
}).done(function(){
Alert.alert(
'恭喜',
'数据设置成功',
[
{text: 'OK', onPress: () => {}}
]
)
})
}
_getData() {
AsyncStorage.getItem('timeStamp', function(err, data){
if(err) return console.log(err);
this.setState({
time : data
})
}.bind(this));
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
{this.state.time || '暂无数据'}
</Text>
<View style={styles.btnWrap}>
<Text style={styles.btn} onPress={this._getData.bind(this)}>点我获取</Text>
</View>
</View>
);
}
}
再来一个 multiSet 和 multiGet 的示例：
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
a : ''
};
}
componentDidMount() {
var me = this;
AsyncStorage.multiSet([['a','1'], ['b','2']], function(err){
if(err) return console.log(err);
AsyncStorage.multiGet(['a', 'b'], function(err, keyValuePairs) {
keyValuePairs.forEach(function (keyValuePair) {
if (keyValuePair[0] === 'a') {
me.setState({
a: keyValuePair[1]
})
}
});
})
})
}
_mergeData() {
var me = this;
AsyncStorage.multiSet([['a','5'], ['c','2']], function(err){
if(err) return console.log(err);
AsyncStorage.getItem('a', function(err, value) {
me.setState({
a: value
})
})
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
{this.state.a || '加载中'}
</Text>
<View style={styles.btnWrap}>
<Text style={styles.btn} onPress={this._mergeData.bind(this)}>点我合并</Text>
</View>
<View style={styles.btnWrap}>
<Text style={styles.btn} onPress={AsyncStorage.getItem.bind(this, ['0',{}])}>点我reload</Text>
</View>
</View>
);
}
}
注意 multiMerge 接口还不能被所有原生环境支持，调用的时候很可能会直接报错。事实上可以直接用 multiSet 替代。
BackAndroid - 返回处理
可以通过该接口来处理应用返回事件。
通过 BackAndroid.addEventListener 和 BackAndroid.removeEventListener 事件，可以监听/移除用户点击安卓设备系统返回键的事件。
通过 BackAndroid.exitApp() 方法可以直接退出当前应用：
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
a : ''
};
}
componentDidMount() {
BackAndroid.addEventListener('hardwareBackPress', this._handleBackPressed.bind(this));
}
componentWillUnmount() {
BackAndroid.removeEventListener('change', this._handleBackPressed.bind(this));
}
_handleBackPressed() {
this.setState({
a : 'backPressed'
})
}
_exitApp() {
BackAndroid.exitApp()
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
{this.state.a || '加载中'}
</Text>
<View style={styles.btnWrap}>
<Text style={styles.btn} onPress={this._exitApp.bind(this)}>退出应用</Text>
</View>
</View>
);
}
}
效果1——点击系统返回键：
效果2——调用 exitApp 方法：
CameraRoll - 相册接口
与相册交互的接口，然而安卓这块没IOS的支持好用（无法保存非本地图片）。
1. 通过 CameraRoll.saveImageWithTag(uri) 可以保存某张本地图片到相册，其中 uri 必须为本地地址（例如 'file:///sdcard/img.png'）。
该接口返回一个 Promise 对象（成功时的回调参数为图片存储后的图片ID）：
_handleSavePic() {
var me = this;
CameraRoll.saveImageWithTag('file:///sdcard/img.png').done(function(uri){
me.setState({
a : uri
})
}, function(err){
Alert.alert(
'保存失败',
JSON.stringify(err),
[
{text: 'OK'}
]
)
})
}
2. 通过 CameraRoll.getPhotos(params<Object>) 可以从相册里去获取图片，其中 params 参数格式为：
{
first : 3, //获取图片的个数
groupTypes : React.propTypes.oneOf([ //分组类型
'Album',
'All',
'Event',
'Faces',
'Library',
'PhotoStream',
'savePhotos'
]),
assetType : React.propTypes.oneOf([ //资源类型
'Photos',
'All',
'Videos'
])
}
该接口返回一个 Promise 对象，成功的回调参数数据格式为：
{
edges: [{
node: {
timestamp: 1405312098,
group_name: 'CameraRoll',
type: 'ALAssetTypePhoto',
image: {
isStored: true,
height: 669,
uri: 'asset-library: //asset/assert.JPG?id=C9DB366F-350876C78006&ext=JPG',
width: 1008
}
},
{node: ....}
}],
page_info: {
has_next_page: true,
start_cursor: 'asset-library: //asset/assert.JPG?id=C9DB366F-350876C78006&ext=JPG',
end_cursor: 'asset-library...'
}
}
//参考至“ReactNative入门与实战”一书162页
来个简单示例：
_handleGetImages() {
var me = this;
var params = {
first : 3,
groupTypes : 'Album',
assetType : 'Photos'
};
CameraRoll.getPhotos(params).done(function(data){
var edges = data.edges,
photos = [];
edges.forEach(function(edge){
photos.push(edge.node.image.uri)
});
me.setState({
photos: photos
})
}, function(err){
Alert.alert(
'打开相册失败',
JSON.stringify(err),
[
{text: 'OK'}
]
)
})
}
Clipboard - 剪切板
该模块接口具有获取/设置剪切板内容的能力。
通过 Clipboard.getString() 可以获得设备剪切板内容，通过 Clipboard.setString(content<String>) 可以设置剪切板内容：
class AwesomeProject extends Component {
constructor(props) {
super(props);
}
_onPress(){
Clipboard.setString('你好啊')
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity>
<View style={[styles.button,{backgroundColor:'#CCC'}]}>
<TextInput />
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>修改剪切板内容为“你好啊”</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
DatePickerAndroid - 日期选择器
通过 DatePickerAndroid.open(options<Object>) 方法可以打开一个标准的Android时间选择器的对话框，并返回一个Promise对象。
其中 options 参数参考如下：
date (Date对象或毫秒时间戳) - 默认显示的日期
minDate (Date对象或毫秒时间戳) - 可选的最小日期
maxDate (Date对象或毫秒时间戳) - 可选的最大日期
Promise的回调参数为：
action - 对应动作，若为取消对话框，该值为 DatePickerAndroid.dismissedAction
year - 选中的年份，若为取消对话框，该值为undefined
month (0-11) - 选中的月份，若为取消对话框，该值为undefined
day - 选中的天值，若为取消对话框，该值为undefined
因此我们可以通过判断 Promise 回调中的 action 是否等价于 DatePickerAndroid.dismissedAction，来得知用户是否做了取消对话框的行为：
class AwesomeProject extends Component {
constructor(props) {
super(props);
}
_onPress(){
DatePickerAndroid.open({
date: new Date(),
minDate: new Date('1900/01/01'),
maxDate: new Date('2100/12/12')
}).done(function(params){
var content = '';
if(params.action !== DatePickerAndroid.dismissedAction){
content = '你选中了' + params.year + '年' + (params.month+1) + '月' + params.day + '日'
} else {
content = '你退出了时间选择对话框'
}
Alert.alert(
'时间选择结果',
content,
[
{text: 'OK', onPress: () => console.log('OK Pressed')}
]
)
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>打开日期选择器</Text>
</View>
</TouchableOpacity>
<TouchableOpacity>
<View style={styles.button}>
<Text style={styles.buttonText}>somebtn</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
Dimensions - 获取应用窗口尺寸
可通过 Dimensions.get('window') 来获取当前窗口尺寸，得到一个含有 width 和 height 属性的对象。
常用于设置图片宽高（例如设置图片宽度为屏幕宽度）：
import React, {
AppRegistry,
Component,
StyleSheet,
Dimensions,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
width : '',
height : ''
};
}
componentDidMount() {
var win_info = Dimensions.get('window');
this.setState({
width: win_info.width,
height: win_info.height
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
屏幕宽度：{this.state.width || '加载中'}
</Text>
<Text style={styles.text}>
屏幕高度：{this.state.height || '加载中'}
</Text>
</View>
);
}
}
启动后显示效果如下：
InteractionManager - 交互管理器
在web页面，我们常规会使用 setImmediate/setTimeout/requestAnimationFrame 来定义动画下一帧的执行时间点，在 RN 的动画交互中，我们通过使用 InteractionManager.runAfterInteractions() 来做对应处理是最佳的选择。
例如我们希望安卓切换场景的时候，能在场景切换动画结束了才开始执行某些操作，可以这么写：
componentDidMount: function(){
InteractionManager.runAfterInteractions(() => {
//TODO: some events
});
}
另外我们可以通过 createInteractionHandle() 接口创建一个交互句柄，通知系统当前有个动画交互开始了。
动画结束时再通过 clearInteractionHandle(handle) 来通知系统该动画交互已结束。
示例：
var handle = InteractionManager.createInteractionHandle();
// 开始执行某些动画交互... (`runAfterInteractions` 任务会被压入队列中等候动画结束)
// 动画交互执行完毕的时候执行clearInteractionHandle通知系统交互结束：
InteractionManager.clearInteractionHandle(handle);
// 触发runAfterInteractions
另外 InteractionManager 还有一个静态方法 setDeadline(deadline<Number>)，用于（使用setTimeout来）挂起所有尚未执行的任务。