react native常见第三方库集成（四）

最新推荐文章于 2024-04-25 08:59:19 发布
最新推荐文章于 2024-04-25 08:59:19 发布
阅读量722 收藏 1
点赞数
分类专栏： react native 文章标签： react-native 第三方库 图片选择
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/halo1416/article/details/81355665
版权

注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。

个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！

这篇文章主要记录一些 react-native-image-crop-picker 和 react-native-image-zoom-viewer 的基本用法....

前言：目前大多数app中图片展示是一个非常常见的功能，在实际开发中，上传图片，设置头像等功能更是屡见不鲜。而在react native的开发前提下，这些需求也变得越来越频繁；但是react native框架本身在拍照和图片选择这方面并没有很好的解决方法。而众多优秀的开源库却可以让我们实现非常好的效果并且使用也比较简单。如：react-native-image-crop-picker，该库实现了本地相册和照相机来采集图片，并且提供多选、图片裁剪等功能，支持iOS和Android两个平台，但需要分别配置。另外：react-native-image-picker这个库也不错，实现启动本地相册和照相机来采集图片，但是作者没有实现裁剪功能。

react-native-image-crop-picker

一、安装：

yarn add react-native-image-crop-picker（npm i react-native-image-crop-picker --save）

          yarn add react-native-image-crop-picker@0.16.0  ==>> 我是指定安装的 0.16.0 版本

link：react-native link react-native-image-crop-picker  ==>>自动配置react-native-image-crop-picker在环境中的一些修改(不是全部)

 

二、配置

android平台：

  •  android平台的Gradle版本必须大于2.2，例如React Native 0.44 创建项目，查看工程的build.gradle中默认gradle版本         

          

  • 在app下的build.gradle中添加useSupportLibrary，添加在android / defaultConfig / 节点下   

          ===>>>   vectorDrawables.useSupportLibrary = true

          

  • AndroidManifest.xml配置文件，添加相机权限  ==>> 可以打开相机

          ===>>>  <uses-permission android:name="android.permission.CAMERA"/>

          

 

三、页面中简单使用

import React, {Component} from "react";
import {
    View,
    Text,
    Button,
} from 'react-native'

import ImagePicker from 'react-native-image-crop-picker';

export class PicScreen extends Component{
    static navigationOptions = {
        header: null,   //去除页面中顶部的空白导航栏
    };
    constructor() {
        super();
        this.state = {
        }
    }

    pic(){
        // ImagePicker.openPicker({         //选择照片
        //     width: 300,
        //     height: 400,
        //     cropping: true,
        // }).then(image => {
        //     console.log(' 图片路径：'+ image);
        // });

        ImagePicker.openCamera({            //启动相机拍照
            width: 300,
            height: 400,
            cropping: false             //是否打开剪裁
        }).then(image => {
            console.log(image);
        });
    }

    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:24,color:'red'}}>图片选择</Text>

                <View style={{marginTop:20}}>

                    <Button
                        title="选择图片"
                        onPress={() => this.pic()}
                    />
                </View>
            </View>
        )
    }
}

 

 

参考博客：https://blog.csdn.net/u013718120/article/details/72781285

                  https://www.jianshu.com/p/8420b08062c7

github：https://github.com/ivpusic/react-native-image-crop-picker

 

react-native-image-zoom-viewer

前言：项目中经常需要点击一张图片或者一组图片来查看大图，react-native-image-zoom-viewer就是一个非常好用的第三方库。

一、安装：

yarn add react-native-image-zoom-viewer（npm i react-native-image-zoom-viewer --save）

 

参考博客：https://www.jianshu.com/p/3137f0e56d68

                  https://blog.csdn.net/sinat_17775997/article/details/74971315

github：https://github.com/magicwing/react-native-image-zoom-viewer

 

react-native-image-crop-picker 和 react-native-image-zoom-viewer综合使用：

代码（有些样式没有）：

imageList.js  ===>>> 组件主文件

import React, {Component} from "react";
import {
    View,
    Text,
    // Button,
    Image,
    TouchableOpacity,
    Dimensions,
    StatusBar,
    Animated,
    Platform,
    Modal,
} from 'react-native';
import {
    Container,
    Header,
    Title,
    Content,
    Footer,
    FooterTab,
    Button,
    Left,
    Right,
    Body,
    Icon,
    Form,
    Item,
    Picker,
    Input,
    Label,
    Radio,
    H1,
    Thumbnail,
    List,
    ListItem,
    // Text,
    CheckBox
} from 'native-base';
import ImagePicker from 'react-native-image-crop-picker';
import R from 'ramda';

import {ImageBrowser} from "./imageBrowser";
import {SquareView} from "./squareView";
import {config} from "../../config";
import {_noPadding,_noMargin} from "../common";

export class ImageList extends Component {
    constructor() {
        super();

        this.state = {
            show: false,
            index: 0,
            shareModalVisible: false,
            modalAnimatedValue: new Animated.Value(0),
        };
    }
    onAdd(){
        this.setState({shareModalVisible: true,});
        Animated.timing(this.state.modalAnimatedValue, {
            toValue: 1,
            duration: 200
        }).start();
    }


    renderItem(its, index) {
        const {edit, onAdd, onDel} = this.props;
        const blankButton = (
            <SquareView layout='row' style={{flex: 1, margin: 2, flexDirection: 'column',}}>
            </SquareView>
        );
        const addButton = (
            <SquareView layout='row' style={{flex: 1, margin: 2, flexDirection: 'column',}}>
                <Button transparent
                        onPress={this.onAdd.bind(this)}
                        style={{..._noPadding, ..._noMargin, flex: 1, justifyContent: 'center', alignSelf: 'stretch', borderStyle: 'dashed', borderWidth: 1, borderColor: '#BDBEBF',}}>
                    <Icon name='add' style={{color: '#BDBEBF', fontSize: config.FONT_SIZE_CONTENT_TEXT * 3,}}/>
                </Button>
            </SquareView>
        );
        const delButton = index => {
            return edit ? (
                <Button transparent
                        onPress={() => onDel(index)}
                        style={{..._noPadding, ..._noMargin, position: 'absolute', padding: 9, top: 0, right: -10,}}>
                    <Icon name="close" style={{alignSelf: 'flex-start', color: '#e1e1e1', fontSize: config.FONT_SIZE_CONTENT_TEXT * 1.5,}}/>
                </Button>
            ) : null;
        };
        const imgButtn = (source, index) => {
            return (
                <SquareView layout='row' style={{flex: 1, margin: 2, flexDirection: 'column',}}>
                    <Button transparent
                            onPress={() => this.onBrowserOpen(index)}
                            style={{..._noPadding, ..._noMargin, flex: 1, flexDirection: 'row', alignSelf: 'stretch',}}>
                        <Image resizeMode='cover' source={source} style={{flex: 1,alignSelf: 'stretch'}}/>
                    </Button>
                    {delButton(index)}
                </SquareView>
            );
        };

        const item = its[index];
        if (item) {
            const {key} = item;
            switch (key) {
                case 'add':
                    return addButton;
                default:
                    return imgButtn(item, index);
            }
        }
        return blankButton;
    }

    render(){
        const {edit, items} = this.props;
        const {show, index} = this.state;
        let its = items;
        // 如果是编辑状态&&在最大个数内，先补上添加按钮
        if (edit && items.length < 3 * 2) {
            its = [...items, {key: 'add',}];
        }
        let vs = [];
        for (let i = 0; i < its.length; i += 3) {
            vs = [...vs, (
                <View key={i} style={{flexDirection: 'row'}}>
                    {this.renderItem(its, i)}
                    {this.renderItem(its, i + 1)}
                    {this.renderItem(its, i + 2)}
                </View>
            )];
        }
        return (
            <View style={{flex:1, margin: 8, alignItems: 'center', justifyContent: 'center',}}>
                {vs}

                <ImageBrowser ref={browser => this.browser = browser}
                              show={show}
                              index={index}
                              onClose={() => this.onBrowserClose()}
                              images={items.map(item => ({...item, url: item.uri}))}
                              saveToLocalByLongPress={false}/>

                <Modal animationType="fade"
                       visible={this.state.shareModalVisible}
                       transparent={true}
                       onRequestClose={()=>{}}
                >
                    {this._renderShareView()}
                </Modal>
            </View>
        );

    }

    onBrowserOpen(index) {
        this.setState({show: true, index});
    }

    onBrowserClose() {
        this.setState({show: false});
    }

    onMenu(type){
        switch (type) {
            case 'camera':
                ImagePicker.openCamera({
                    // width: 300,
                    // height: 400,
                    // compressImageMaxWidth: 1440,
                    // compressImageMaxHeight: 2560,
                    // compressImageQuality: 0.8,
                    compressImageMaxWidth:1024,
                    compressImageMaxHeight:1024,
                    cropping: false,
                }).then(this.onImage.bind(this));
                break;
            case 'gallery':
                ImagePicker.openPicker({
                    // width: 300,
                    // height: 400,
                    compressImageMaxWidth:1024,
                    compressImageMaxHeight:1024,
                    cropping: false,
                }).then(this.onImage.bind(this));
                break;
        }
    }

    onImage(image){
        this.setState({ shareModalVisible: false });
        this.state.modalAnimatedValue.setValue(0);

        const {onAdd} = this.props;
        if (R.is(Function)(onAdd)) {
            onAdd(image);
        }
    }

    _renderShareView() {
        const {width, height} = Dimensions.get('window');
        const itemWidth = width;//(width - 15 * 2) / 5;
        const itemHeight = 44;//(height * 0.45 - 50 - 48) / 2;
        const logoWidth = itemWidth * 0.6;
        const statusHeight = Platform.select({ios: 0, android: StatusBar.currentHeight});

        return (
            <View style={{width: width, height: height,}}>
                <TouchableOpacity
                    activeOpacity={1}
                    style={{width: width, flex: 5.5}}
                    onPress={() => {
                        this.setState({shareModalVisible: false})
                        this.state.modalAnimatedValue.setValue(0)
                    }}
                >
                    <Animated.View
                        style={{backgroundColor: 'rgba(0, 0, 0, 0.65)', width: width, flex: 1, opacity: this.state.modalAnimatedValue}}/>
                </TouchableOpacity>
                <Animated.View
                    style={{
                        backgroundColor: '#444',
                        width: width,
                        height: height * 0.4,
                        paddingHorizontal: 15,
                        position: 'absolute',
                        top: this.state.modalAnimatedValue.interpolate({
                            inputRange: [0, 1],
                            outputRange: [height, height * 0.6 - statusHeight]
                        })
                    }}
                >
                    <View
                        style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 50, borderBottomWidth: 1, borderColor: '#555'}}>
                        <Text style={{color: '#bbb', fontSize: 14, marginLeft: 5}}>添加照片</Text>
                    </View>

                    <View style={{flexDirection: 'column', flex: 1, paddingVertical: 19,}}>
                        {[{title: '拍照', type: 'camera',}, {title: '从相册选择', type: 'gallery',}].map(menu => {
                            return (
                                <TouchableOpacity
                                    key={`imagelist-${menu.type}`}
                                    activeOpacity={0.75}
                                    style={{flex: 1, height: itemHeight, justifyContent: 'center', alignItems: 'center'}}
                                    onPress={() => this.onMenu(menu.type)}
                                >
                                    {/*<Image style={{width: logoWidth, height: logoWidth}} source={channel.logo}/>*/}
                                    <Text style={{fontSize: 14, color: '#fff',}}>{menu.title}</Text>
                                </TouchableOpacity>
                            )
                        })}
                    </View>
                    <TouchableOpacity
                        activeOpacity={0.75}
                        style={{width: width, marginLeft: -15, borderTopWidth: 1, borderColor: '#777', height: 48, justifyContent: 'center', alignItems: 'center'}}
                        onPress={() => {
                            this.setState({shareModalVisible: false});
                            this.state.modalAnimatedValue.setValue(0)
                        }}
                    >
                        <Text style={{fontSize: 14, color: '#ccc',}}>取消</Text>
                    </TouchableOpacity>
                </Animated.View>
            </View>
        )
    }
}

squareView.js  ===>>>  针对主文件封装的类View组件

/**
 * Created by sysssc on 2017/5/31.
 */
import React, {Component} from "react";
import {
    Alert,
    View,
    Text,
    TextInput,
    // Button,
    TouchableOpacity,
    Switch,
} from "react-native";
import {
    Container,
    Header,
    Title,
    Content,
    Footer,
    FooterTab,
    Button,
    Left,
    Right,
    Body,
    Icon,
    Form,
    Item,
    Input,
    Label,
    H1,
    ListItem,
    // Text,
    CheckBox
} from 'native-base';

export class SquareView extends Component {
    constructor() {
        super();

        this.state = {
            width: 0,
            height: 0,
            direction: 'row' // 'column' and 'row'
        };
    }

    render() {
        const square = (
            <View
                {...this.props}
                style={
                    [this.props.style,
                        {width: this.state.width, height: this.state.height}]
                }
                onLayout={event => {
                    const {width, height} = event.nativeEvent.layout;
                    switch (this.props.layout) {
                        case 'column':
                            if (this.state.height !== height) {
                                this.setState({width: height, height: height});
                            }
                            break;
                        case 'row':
                            if (this.state.width !== width) {
                                this.setState({width: width, height: width});
                            }
                            break;
                    }
                }}>
                {this.props.children}
            </View>
        );
        return square;
    }
}

imageBrowser.js  ===>>>  点击图片放大组件

/**
 * Created by sysssc on 2017/6/7.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Modal
} from 'react-native';
import {
    Container,
    Header,
    Title,
    Content,
    Footer,
    FooterTab,
    Button,
    Left,
    Right,
    Body,
    Icon,
    Form,
    Item,
    Picker,
    Input,
    Label,
    Radio,
    H1,
    Thumbnail,
    List,
    ListItem,
    // Text,
    CheckBox
} from 'native-base';

import ImageViewer from 'react-native-image-zoom-viewer';

export class ImageBrowser extends Component {
    render() {
        const {show, onClose, images, index, saveToLocalByLongPress} = this.props;
        return (
            <Modal visible={show} transparent={true} animationType={'slide'} onRequestClose={()=>{}}>
                <ImageViewer imageUrls={images} index={index} saveToLocalByLongPress={!!saveToLocalByLongPress}/>
                <Button transparent style={styles.back} onPress={onClose}>
                    <Icon name='close' style={{color: '#fffa', fontSize: 38,}}/>
                </Button>
            </Modal>
        )
    }
}

const styles = {
    back: {
        position: 'absolute',
        borderRadius: 5,
        padding: 40,
        top: 28,
        right: 0,
    },
};

效果：

 

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出

对博客文章的参考，若原文章博主介意，请联系删除！请原谅

 

 

halo1416
关注
专栏目录
React Native第三方组件库汇总
xiangzhihong8的专栏
08-18 2万+
移动跨平台框架React Native经过4年的发展，其生态已经变得异常丰富，在使用React Native开发项目的过程中，为了提高开发效率，我们经常会借鉴一些使用使用率比较高的开源库，根据大众的需求，对这些使用较高的 React-Native UI 库，我们做一个简单的总结和归类，方便大家更好地入门 React Native。 第三方库 UI套件 1， NativeBase N...
React Native之常用第三方库
xiangzhihong8的专栏
01-01 1万+
前言React Native出来一年多了，受到各大开发人员的喜爱，但是由于只是专注于View层的开发，因此在很多深层次上还需要结合原生app做一定的兼容，还有就是现在好多控件，如Android中已是系统的控件的sidemenu、checkbox、gridview等，这些在react native中 系统是没有给我们提供的，这时候就借助了第三方开源的力量。 那么我们今天说说在React Native
美团React Native开源组件库beeshell详解
weixin_34124939的博客
10-02 527
近年来，伴随着大前端概念的提出和兴起，移动端和前端的边界变得越来越模糊，涌现了一大批移动跨平台开发框架和模式。从早期的PhoneGap、inoc等Hybird技术，到现在耳熟能详的React Native、Weex和Flutter等技术，无不体现着移动端开发的前端化。而提供一套三端统一的开发框架，一直是前端奋斗的目标，而React Native就是这么一个不错的三端统一的跨平台开发框架，这方面的知...
react native 的命令以及一些第三方库的安装
qq_40473204的博客
05-16 960
react-native init AwesomeProjectcd AwesomeProjectreact-native run-androidnpm install react-native-vector-icons --savenpm i react-native-elements --savenpm install --save react-navigation
reactnative调用第三方地图插件进行导航兼容android和ios
08-10
总结，`react-native-map-linking`库提供了一种简单的方式来集成React Native应用与多种第三方地图应用，包括高德地图、百度地图、腾讯地图和Apple地图。通过适当的配置和调用，开发者可以为用户提供无缝的导航体验...
react-native 好用的第三方组件1
08-08
以下是对标题和描述中提到的一些关键React Native第三方组件的详细说明： 1. **tcomb-form-native**： `tcomb-form-native` 是一个专门针对iOS和React Native设计的表单处理库。它允许开发者使用JSON模式来定义...
React Native第三方平台分享的实例（Android，IOS双平台）
08-29
总之，React Native第三方平台分享涉及到Android和iOS的原生集成，包括库的安装、权限设置、配置文件修改以及JavaScript代码的编写。通过以上步骤，你可以实现跨平台的分享功能，让用户能够方便地与他们的社交圈分享...
swift-ReactNative第三方分享一行代码双平台分享
08-15
React Native 第三方分享【一行代码，双平台分享】 支持平台：【QQ】【QQ空间】【微信】【朋友圈】【微博】【FaceBook】
React Native集成第三方库：原生模块与原生交互
# 1. React Native 与原生模块介绍 ...在 React Native 中，原生模块是指用原生代码编写的模块，例如针对特定平台（iOS 或 Android）的功能模块或第三方库。原生模块可以提供一些高性能、复杂的功能，
跨平台ReactNativeUI组件库
08-10
跨平台 React Native UI组件库
React Native开发中常用三方组件库
s349856186的专栏
01-05 4026
点击打开链接 react-native -30 (每天一个Demo，共三十个，有些demo很不错哦) https://github.com/fangwei716/30-days-of-react-native 拖动九宫格 https://raw.githubusercontent.com/fangwei716/ThirtyDaysOfReactNative/sc
react native常见第三方库集成（三）
halo1416的博客
08-01 706
注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。 个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！ 这篇文章主要记录一些React Navigation的基本用法.... 前言：在 web 浏览器中, 你可以使用 (&lt;a&gt...
【React Native】在原生项目中集成之坑点总结
热门推荐
Tiny的专栏
12-07 1万+
Integration With Exist apps 在原生项目中，集成React Native框架，部分功能是用RN进行开发。包括依赖引入，包重复等问题进行总结，希望能帮到大家。
react native常见第三方库集成（五）
halo1416的博客
08-06 646
注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。 个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！ 前言：这两天正在开发一个新项目，大佬在整理需求，so，项目环境的搭建以及常用第三方库的集成这种事情就轮到我了。。。 项目中有一个错误...
react-native-customized-image-picker 图片组件 使用方法
hopefullman的博客
06-26 363
import ImagePicker from "react-native-customized-image-picker"; pickers(){ ImagePicker.openPicker({ multiple: true, maxSize:3-this.state.imagespath.length, spanCount:3, includeBase64:true, minCompressSize:400, }) .
react-native-image-crop-picker 图片选择上传组件
唤起鱼的记忆
12-07 4546
react-native-image-crop-picker 图片选择上传组件 1、组件描述： react-native-image-crop-picker是基于react native的一款图片选择上传组件，调用手机拍照和相册。详细使用方法参考地址： （1）npm 组件地址 2、组件使用： （1）先安装react-native-image-crop-picker $ npm install react-native-image-crop-picker --save （2）在项目中集成react-nativ
react-native-image-zoom-viewer 预览图片
最新发布
m0_69210482的博客
04-25 527
react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果，点击小图片实现浏览原图效果。
reactnative封装第三方原生sdk
06-13
在React Native中封装原生第三方SDK的步骤如下： 1. 创建一个原生模块（Native ...通过将原生第三方SDK封装到React Native模块中，你可以轻松地在React Native应用程序中使用该SDK，并将其与JavaScript代码无缝集成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值