开课中国  |  [Investor Relations]   |  官方微博

广州.NET培训中心

美国上市公司 · 亿元级外企.NET培训企业

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

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

  • React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于View层的开发,因此在很多深层次上还需要结合原生app做一定的兼容,还有就是现在好多控件,如Android中已是系统的控件的sidemenu、checkbox、gridview等,这些在react native中 系统是没有给我们提供的,这时候就借助了第三方开源的力量。那么我们今天说说在React Native项目开发中常见的一些第三方库。

  • 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

2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56