广州.NET培训
达内广州.NET培训中心

18087159764

热门课程

常见的第三方库:CheckBox(多选按钮)

  • 时间:2017-05-08
  • 发布:IT
  • 来源:IN

React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于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

});

}

});

上一篇:达内Net就业分析:Net课程采用“5+4”革命式培训
下一篇:Net第三方库:picker-Android
选择城市和中心
贵州省

广西省

海南省