调用手机通讯功能
这里我们用react-native-communications这个三方框架
- 在HybridApp里实现这个功能还是挺麻烦的，需要客户端封装好接口给H5调用，但是在ReactNative里，一个组件就能搞定—— react-native-communications，安装请查看官方文档
这个组件安装很简单，支持的功能有：拨号、发短信、发Email、打开网页 等 ，下面是官方一个综合的例子：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
import Communications from 'react-native-communications';
class RNCommunications extends Component({
render() {
return (
Communications.phonecall('0123456789', true)}>
Make phonecall
Communications.email(['emailAddress1', 'emailAddress2'],null,null,'My Subject','My body text')}>
Send an email
Communications.text('0123456789')}>
Send a text/iMessage
Communications.web('https://github.com/facebook/react-native')}>
Open react-native repo on Github
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'rgb(253,253,253)',
},
holder: {
flex: 0.25,
justifyContent: 'center',
},
text: {
fontSize: 32,
},
});
AppRegistry.registerComponent('RNCommunications', () => RNCommunications);
访问手机相册
- 调取手机相册和上传图片是个老生常谈的问题，ReactNative
里可以通过react-native-image-picker来处理，安装请查看官方文档拎一段代码片段：
import ImagePicker from 'react-native-image-picker'
const options = {
title: '选择上传图片', // specify null or empty string to remove the title
cancelButtonTitle: '取消',
takePhotoButtonTitle: '拍照...', // specify null or empty string to remove this button
chooseFromLibraryButtonTitle: '从库中选择...', // specify null or empty string to remove this button
//customButtons: {
// 'Choose Photo from Facebook': 'fb', // [Button Text] : [String returned upon selection]
//},
cameraType: 'back', // 'front' or 'back'
mediaType: 'photo',
//videoQuality: 'high', // 'low', 'medium', or 'high'
maxWidth: 200, // photos only
maxHeight: 200, // photos only
allowsEditing: true,
noData: false,
}
//...
onUpload() {
ImagePicker.showImagePicker(options, (response) => {
if (response.didCancel) {
//console.log('User cancelled image picker');
}
else if (response.error) {
//console.log('ImagePicker Error: ', response.error);
} else {
let source = {uri: response.uri.replace('file://', ''), isLocal: true, isStatic: true};
this.setState({ form: {...this.state.form, avatar: source} })
}
})
}
``
####模态框
- 模态框在App里使用的也比较多，比如确认模态、加载模态、输入模态等，出于良好的用户体验和兼容性考虑，我这里底层采用react-native-modalbox
，然后根据不同功能进行二次加工。
[](http://jafeney.com/2016/06/17/2016-06-17-react-native/#ConfirmModal)ConfirmModal
很常见，不多做介绍，copy下面代码 直接可以使用
import React, { Component } from 'react';
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import ModalBox from 'react-native-modalbox';
const styles = StyleSheet.create({
modal: {
borderRadius: 10,
},
modalContent: {
flex: 1,
paddingLeft: 10,
paddingRight: 10,
},
h2: {
marginTop: 15,
fontSize: 20,
color: '#555',
textAlign: 'center',
},
modalOption: {
flexDirection: 'row',
borderTopWidth: 1,
borderTopColor: '#ddd',
},
modalCancel: {
flex: 1,
padding: 15,
},
modalCancelText: {
fontSize: 16,
textAlign: 'center',
},
modalConfirm: {
flex: 1,
padding: 15,
borderLeftWidth: 1,
borderLeftColor: '#ddd',
},
modalConfirmText: {
fontSize: 16,
textAlign: 'center',
},
message: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
messageText: {
color: '#555',
fontSize: 16,
},
});
export default class ConfirmModal extends Component {
constructor(props) {
super(props);
}
open() {
this.refs.modal.open()
}
close() {
this.refs.modal.close()
}
render() {
let { width } = Dimensions.get('window');
return (
style={[styles.modal, {width: this.props.width || (width-60), height: this.props.height || 200}]}
backdropOpacity={0.3}
position={"center"}
isOpen={false}>
)
}
}
LoadingModal
这个也很常见，copy下面代码 直接可以使用
import React, { Component } from 'react';
import {
StyleSheet,
} from 'react-native';
import ModalBox from 'react-native-modalbox';
const styles = StyleSheet.create({
modal: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
},
});
export default class LoadingModal extends Component {
constructor(props) {
super(props);
}
open() {
this.refs.modal.open()
}
close() {
this.refs.modal.close()
}
render() {
return (
ref="modal"
position={"center"}
backdrop={false}
isOpen={this.props.isOpen || false}
//backdropOpacity={.3}
backdropPressToClose={false}
animationDuration={10}
>
);
}
}
####PickerModal
- 这个特别讲解一下，PickerModal用于页面上的Picker的处理，显示效果如下：
import React, { Component } from 'react';
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
Picker,
View,
} from 'react-native';
import ModalBox from 'react-native-modalbox'
import dismissKeyboard from '../mixins/dismiss-keyboard'
const styles = StyleSheet.create({
popup: {
},
popupContent: {
flex: 1,
paddingLeft: 10,
paddingRight: 10,
},
h2: {
marginTop: 15,
fontSize: 20,
color: '#555',
textAlign: 'center',
},
popupOption: {
flexDirection: 'row',
borderTopWidth: 1,
borderTopColor: '#ddd',
},
popupCancel: {
flex: 1,
padding: 15,
},
popupCancelText: {
fontSize: 16,
textAlign: 'center',
},
popupConfirm: {
flex: 1,
padding: 15,
borderLeftWidth: 1,
borderLeftColor: '#ddd',
},
popupConfirmText: {
fontSize: 16,
textAlign: 'center',
},
message: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
messageText: {
color: '#555',
fontSize: 16,
},
});
export default class PickerModal extends Component {
constructor(props) {
super(props);
}
open() {
dismissKeyboard()
this.refs.modal.open()
}
close() {
this.refs.modal.close()
}
_renderPickerItems(data) {
data.map((item)=>{
return [
]
})
}
render() {
let { width } = Dimensions.get('window');
return (
style={[styles.popup, {width: this.props.width || (width), height: this.props.height || 200}]}
backdropOpacity={0.3}
position={"bottom"}
swipeToClose={false}
isOpen={false}>
{this.props.dataSource.map((item,i)=> {
if (item.length) return
})}
)
}
}
补充说明一下dismissKeyboard()这个方法，该方法用于关闭页面的keyboard(键盘)，ReactNative 默认没有这种方法，需要自己编写：
import { TextInput } from 'react-native';
const { State: TextInputState } = TextInput;
export default function dismissKeyboard() {
TextInputState.blurTextInput(TextInputState.currentlyFocusedField());
}
####导航条
- 这个组件其实ReactNative提供了原生版本的，但是样式和功能上不好控制，建议自己手写一个，代码如下：
import React, { Component } from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
const styles = StyleSheet.create({
leftButton: {
marginLeft: 5,
},
rightButton: {
marginRight: 5,
},
button: {
width: 44,
height: 44,
justifyContent: 'center',
alignItems: 'center',
},
nav: {
backgroundColor: '#f9f9f9',
flexDirection: 'row',
alignItems: 'center',
},
title: {
flex: 1,
height: 44,
justifyContent: 'center',
},
btnText: {
fontSize: 16,
color: '#777',
},
marginForIOS: {
marginTop: 20,
},
titleText: {
fontSize: 20,
textAlign: 'center',
color: '#555'
}
});
export class RightButton extends Component {
render() {
return (
onPress={this.props.onPress}>
{ this.props.text ?
{ this.props.icon ?
);
}
}
export class NavigatorBar extends Component {
_leftButton() {
if (this.props.navigator.getCurrentRoutes().length > 1) return (
onPress={()=> this.props.navigator.pop() }>
)
}
_rightButton() {
if (this.props.rightButton) return (
)
}
render() {
return (
{this._leftButton()}
{this._rightButton()}
);
}
}
- 然后在[Container](http://lib.csdn.net/base/docker)里就可以使用了：
import { NavigatorBar } from '../components/navigator'
- 没有右侧按钮
- 右侧按钮为文字