ReactNative入门（安卓）——API（上）

Alert - 弹窗

通过 Alert.alert() 方法调用唤起原生弹窗，点击会触发 onPress 回调（参考下方代码）并清除弹窗。

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

View Code





[b]Dimensions - 获取应用窗口尺寸[/b]

可通过 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>
);
}
}

启动后显示效果如下：





[b]InteractionManager - 交互管理器[/b]

在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来）挂起所有尚未执行的任务。