认识达内从这里开始

广州IT培训小编React Native出来一年多了，受到各大开发人员的喜爱，但是广州达内IT培训小编觉得由于只是专注于View层的开发，因此在很多深层次上还需要结合原生app做一定的兼容，还有就是现在好多控件，如Android中已是系统的控件的sidemenu、checkbox、gridview等，这些在react native中 系统是没有给我们提供的，这时候就借助了第三方开源的力量。

那么我们今天说说在React Native项目开发中常见的一些第三方库。

react-native-check-box CheckBox

基本用法：

style=

onClick={()=>this.onClick(data)}

isChecked={data.checked}

leftText={leftText} />;

当然我们也可以自定义样式，主要是对选中和未选中的样式做修改：

renderCheckBox(data) {

var leftText = data.name;

return (

style=

onClick={()=>this.onClick(data)}

isChecked={data.checked}

leftText={leftText}

checkedImage={

} unCheckedImage={

}

/>);

}

RadioButton(单选按钮)

react-native-flexi-radio-button

使用也很简单，就是在中嵌套下就行：

onSelect = {(index, value) => this.onSelect(index, value)}

>

This is item #1

This is item #2

This is item #3

sidemenu (侧滑栏)

react-native-side-menu

使用：

splashscreen

react-native-splash-screen

使用也很简单，就是添加一个闪屏的xml

imagepicker

这个组件帮助我们选取图片和调用相机等，这个组件同时支持photo和video，也就是照片和视频都可以用这个组件实现。

用法：

import ImagePickerManager from ‘NativeModules‘;

var options = {

title: ‘Select Avatar‘, //选择器的标题，可以设置为空来不显示标题

cancelButtonTitle: ‘Cancel‘,

takePhotoButtonTitle: ‘Take Photo...‘, //调取摄像头的按钮，可以设置为空使用户不可选择拍照

chooseFromLibraryButtonTitle: ‘Choose from Library...‘, //调取相册的按钮，可以设置为空使用户不可选择相册照片

customButtons: {

‘Choose Photo from Facebook‘: ‘fb‘, // [按钮文字] : [当选择这个按钮时返回的字符串]

},

mediaType: ‘photo‘, // ‘photo‘ or ‘video‘

videoQuality: ‘high‘, // ‘low‘, ‘medium‘, or ‘high‘

durationLimit: 10, // video recording max time in seconds

maxWidth: 100, // photos only默认为手机屏幕的宽，高与宽一样，为正方形照片

maxHeight: 100, // photos only

allowsEditing: false, //当用户选择过照片之后是否允许再次编辑图片

};

ImagePickerManager.showImagePicker(options, (response) => {

console.log(‘Response = ‘, response);

if (response.didCancel) {

console.log(‘User cancelled image picker‘);

}

else if (response.error) {

console.log(‘ImagePickerManager Error: ‘, response.error);

}

else if (response.customButton) {

//这是当用户选择customButtons自定义的按钮时，才执行

console.log(‘User tapped custom button: ‘, response.customButton);

}

else {

// You can display the image using either data:

if (Platform.OS === ‘android‘) {

source = {uri: response.uri, isStatic: true};

} else {

source = {

uri: response.uri.replace(‘file://‘, ‘‘),

isStatic: true

};

}

this.setState({

avatarSource: source

});

}

});