photo reactnative_微信小程序拿到data里面photo里面的photo_url - CSDN
  • 移动跨平台框架React Native经过4年的发展,其生态已经变得异常丰富,在使用React Native开发项目的过程中,为了提高开发效率,我们经常会借鉴一些使用使用率比较高的开源库,根据大众的需求,对这些使用较高的 ...

    移动跨平台框架React Native经过4年的发展,其生态已经变得异常丰富,在使用React Native开发项目的过程中,为了提高开发效率,我们经常会借鉴一些使用使用率比较高的开源库,根据大众的需求,对这些使用较高的 React-Native UI 库,我们做一个简单的总结和归类,方便大家更好地入门 React Native。

    本文只是收集了一些常见的UI库和功能库,除了上面介绍的知名第三方库之外,还有很多实现小功能的库,这些库可以大大的提高我们的开发效率,并且可以在此基础上进行二次开发。并且欢迎大家关注我的《React Native移动开发实战》,第二版修改版会再近期再版,欢迎持续关注。

    第三方库

    UI套件

    1, NativeBase

    NativeBase 是一个广受欢迎的 UI 组件库,为 React Native 提供了数十个跨平台组件。在使用 NativeBase 时,你可以使用任意开箱即用的第三方原生库,而这个项目本身也拥有一个丰富的生态系统,从有用的入门套件到可定制的主题模板。
    NativeBase 项目地址: https://github.com/GeekyAnts/NativeBase
    入门学习地址: https://reactnativeseed.com/

    2,React Native Elements

    React Native Elements是一个高度可定制的跨平台 UI 工具包,完全用 Javascript 构建。该库的作者声称“React Native Elements 的想法更多的是关于组件结构而不是设计,这意味着在使用某些元素时可以减少样板代码,但可以完全控制它们的设计”,这对于开发新手和经验丰富的老手来说都很有吸引力。
    React Native Elements 项目地址:
    https://github.com/react-native-training/react-native-elements
    React Native Elements 示例项目:
    https://react-native-training.github.io/react-native-elements/

    3,Shoutem

    Shoutem也是一个 React Native UI 工具包,由 3 个部分组成:UI 组件、主题和组件动画。该库为 iOS 和 Android 提供了一组跨平台组件,所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式,这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

    项目地址:https://shoutem.github.io/ui/

    4, UI Kitten

    UI Kitten这个库提供了一个可定制和可重复使用的 react-native 组件工具包,该工具包将样式定义移到特定位置,从而可以单独重用组件或为组件设置样式。通过传递不同的变量,可以很容易地“动态”改变主题样式。
    项目地址: https://github.com/akveo/react-native-ui-kitten
    项目体验地址:https://expo.io/@akveo/ui-kitten-explorer-app

    5,React Native Material UI

    React Native Material UI是一组高度可定制的 UI 组件,实现了谷歌的 Material Design。请注意,这个库使用了一个名为 uiTheme 的 JS 对象,这个对象在上下文间传递,以实现最大化的定制化能力。

    React Native Material UI 项目地址:
    https://github.com/xotahal/react-native-material-ui
    包含库组件及示例的清单:
    https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md

    6,React Native Material Kit

    React Native Material Kit是一套很有用的 UI 组件和主题,实现了谷歌的 Material Design。不过需要说明的是, React Native Material Kit在2017 年 12 月之后就停止维护了。
    项目地址: https://github.com/xinthink/react-native-material-kit

    7,Nachos UI

    Nachos UI 是一个 React Native 组件库,提供了 30 多个可定制的组件,这些组件也可以通过 react-native-web 在 Web 上运行。它通过了快照测试,支持格式化和 yarn,提供了热火的设计和全局主题管理器。
    项目地址: https://github.com/nachos-ui/nachos-ui

    8,React Native UI Library

    Wix 工程公司正致力于开发这个最先进的 UI 工具集和组件库,它还支持 react-native-animatable 和 react-native-blur。这个库附带了一组预定义的样式预设(转换为修饰符),包括 Color、Typography、Shadow、Border Radius 等。
    项目地址: https://github.com/wix/react-native-ui-lib
    这里写图片描述

    9,React Native Paper

    React Native Paper是一个跨平台的 UI 组件库,它遵循 Material Design 指南,提供了全局主题支持和可选的 babel 插件,用以减少捆绑包大小。
    React Native Paper 项目地址:
    https://github.com/callstack/react-native-paper

    Expo 示例应用程序:
    https://expo.io/@satya164/react-native-paper-example

    10,React Native Vector Icons

    React Native Vector Icons是一组 React Native 的可定制图标,支持 NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用,而且被数千个应用程序以及其他 UI 组件库(如 react-native-paper)所使用。
    项目地址: https://github.com/oblador/react-native-vector-icons
    示例项目:https://oblador.github.io/react-native-vector-icons/

    11,Teaset

    Teaset是一个 React Native UI 库,提供了 20 多个纯 JS(ES6)组件,用于内容显示和动作控制。虽然它的文档不够详尽,但它简洁的设计吸引了我的眼球。
    项目地址:https://github.com/rilyu/teaset

    其他库

    1,antd-mobile

    antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件。
    这里写图片描述
    项目地址:https://github.com/ant-design/ant-design-mobile

    2,react-native-button

    react-native-button是github上一个开源的button组件,目前仍保持比较快的更新频率,提供比较丰富的Button功能。
    项目地址:https://github.com/ide/react-native-button

    3,react-native-image-viewer

    react-native-image-viewer是一个图片大图浏览的库,点击图片可以放大缩小。
    这里写图片描述
    项目地址:https://github.com/ascoders/react-native-image-viewer

    4,react-native-image-picker

    react-native-image-picker是实现多个图像选择、裁剪、压缩等功能的第三方库,可以使用该库实现图片、照相等操作。
    这里写图片描述
    项目地址:https://github.com/react-community/react-native-image-picker

    5,react-native-picker

    react-native-picker是React native最常见的滚轮控件,可以实现单滚轮、双滚轮和三滚轮效果。
    这里写图片描述
    项目地址:https://github.com/beefe/react-native-picker

    6,react-native-scrollable-tab-view

    react-native-scrollable-tab-view是一个带有TabBar和可切换页面的控件。,在Android中可以看成是ViewPager和TabLayout的结合。
    项目地址:https://github.com/happypancake/react-native-scrollable-tab-view

    7,react-native-app-intro

    react-native-app-intro是实现引导页的库,当然开发者也可以自己手动实现。

    项目地址:https://github.com/fuyaode/react-native-app-intro

    8,3D Touch

    3D Touch是实现React native 3D Touch的库,可以用此库很方便的实现3D Touch。效果如下:
    这里写图片描述
    项目地址:https://github.com/jordanbyron/react-native-quick-actions

    react-native-snap-carousel是可以实现复杂效果的轮播图库,实现的效果如下:
    这里写图片描述
    除此之外,还可以实现Galley效果等多种效果。
    项目地址:https://github.com/archriss/react-native-snap-carousel

    10,react-native-blur

    react-native-blur是专门用于实现毛玻璃效果的。
    项目地址:https://github.com/react-native-community/react-native-blur

    11,react-native-actionsheet

    react-native-actionsheet是实现底部弹框的组件,可以在Android和iOS平台上共用,当然也可以自己封装实现。
    这里写图片描述
    项目地址:https://github.com/beefe/react-native-actionsheet

    12,react-native-popover

    react-native-popover是React Native开发中常见的弹出提示框操作,其效果如下图所示:
    这里写图片描述

    13,react-native-charts-wrapper

    图表在移动开发中应用的场景可谓非常多,这里介绍一款使用的比较多的库。
    这里写图片描述
    项目地址:https://github.com/wuxudong/react-native-charts-wrapper

    14,react-native-spinkit

    react-native-spinkit是一个很炫的加载动画第三方库,可以根据实际情况定制加载的动画。
    这里写图片描述
    https://github.com/maxs15/react-native-spinkit

    15,Facebook Design-iOS 10 iPhone GUI

    Facebook Design-iOS 10 iPhone GUI是iOS 10 公开版的 GUI 元素模板,包括 Sketch、Photoshop、Figma、XD 和 Craft。
    项目首页:https://facebook.design/ios10

    展开全文
  • 1 查看react-native所有信息 2 手动更新react-native 3 设置指定react-native 有时需要将React Native项目更新到最新版本,可以获得更多的API、视图、开发工具,官方发布新版本后不再对旧版本提供维护; 1 查看...

    目录

    1 查看react-native所有信息

    2 手动更新react-native

    3 设置指定react-native


    有时需要将React Native项目更新到最新版本,可以获得更多的API、视图、开发工具,官方发布新版本后不再对旧版本提供维护;

    1 查看react-native所有信息

    npm info react-native

    查询所有版本信息;

    2 手动更新react-native

    打开项目的package.json文件,然后修改dependencies模块下的react-native的版本号;

    eg:

    "react-native": "^0.55.4"

    修改为:

    "react-native": "^0.56.0",

    然后执行:

    npm install

    3 设置指定版本react-native

    npm install --save react-native@最新版本号
    eg:
    npm install --save react-native@0.56.0

    参考:修改react-native项目的react-native版本

    展开全文
  • 创建指定的React-Native版本刚刚开始学习React Native,很多都不懂,搭建环境的时候遇到了挺多问题的,一直在折腾。我是按照React Native文档来搭建环境的,安装react-native-cli使用的是下面的命令。npm install -g...

    创建指定的React-Native版本

    刚刚开始学习React Native,很多都不懂,搭建环境的时候遇到了挺多问题的,一直在折腾。

    我是按照React Native文档来搭建环境的,安装react-native-cli使用的是下面的命令。

    npm install -g react-native-cli

    安装完之后创建了一个项目test,发现react-native的版本是最新的0.50.1,这个版本目录中是没有index.android.js和index.ios.js这两个文件的,多了index.js和App.js等文件
    这里写图片描述

    刚学React Native就使用最新的版本肯定会遇到很多别人没有遇到的坑,而且我买的书《React Native跨平台移动应用开发》这本书是使用0.41.0版本的,为了统一所以还是使用低版本吧
    结果我想当然的使用react-native init demo @0.41.0 这个命令来创建低版本的项目,结果是不对的,这样创建出来的依然是最新版本的项目。
    后来在百度上看到说,在安装react-native-cli的时候可以指定版本,使用npm install -g react-native-cli @0.41.0,然后我把react-native-cli卸载了,重新安装,不管怎么试都是不行的,直接就报错了。也可能是可以的,但是我试了是不行的。
    后来又找到了一个方法:

    react-native init demo --verbose --version 0.41.0

    出自:http://www.jianshu.com/p/717dee645939
    我试了是可以的,但是具体原理我是不太懂的。
    这里写图片描述
    参考:https://stackoverflow.com/questions/34211131/new-react-native-project-with-old-version-of-react-native/37623531#37623531

    展开全文
  • React Native的照相机和图片 react-native-image-picker如果要实现多个图像选择,裁剪,压缩等功能需要 react-native-image-crop-picker 安装yarn add react-native-image-picker react-native link 环境配置1....
    React Native的照相机和图片 

    react-native-image-picker


    如果要实现多个图像选择,裁剪,压缩等功能需要 react-native-image-crop-picker

    安装

    yarn add react-native-image-picker      react-native link
    

    环境配置

    1.android

    1,在android/settings.gradle文件中添加如下代码:
    include ':react-native-image-picker'
    project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

    2,在android/app/build.gradle文件的dependencies中添加如下代码:
    compile project(':react-native-image-picker')

    3,在AndroidManifest.xml文件中添加权限:
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    4,最后在MainApplication.Java文件中添加如下代码:
    import com.imagepicker.ImagePickerPackage;
    new ImagePickerPackage()

    属性


    完整的代码

    import ImagePicker from 'react-native-image-picker';
     import { 
         Platform, 
         StyleSheet, 
         Text, 
         View, 
         PixelRatio, 
         TouchableOpacity, 
         Image, } from 'react-native';
    
      const instructions = Platform.select({
                    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', 
                    android: 'Double tap R on your keyboard to reload,\n' + 
                             'Shake or press menu button for dev menu',
            }); 
    
    
    
    export default class App extends Component { 
            
        state = { avatarSource: null, videoSource: null }; 
           
        //选择图片 
            
        selectPhotoTapped() { 
                 const options = {
                                title: '选择图片', //标题
                                cancelButtonTitle: '取消',//取消按钮 
                                takePhotoButtonTitle: '拍照', //拍照按钮
                                chooseFromLibraryButtonTitle: '选择照片',//从图库选择图片 
                                customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'},],//自定义按钮
                                cameraType: 'back', //类型 'front' or 'back'
                                mediaType: 'photo',//图片或视频 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android 
                                videoQuality: 'high', //视频质量
                                durationLimit: 10, //最大视频录制时间
                                maxWidth: 300, //图片最大宽度
                                maxHeight: 300,//图片最大高度
                                quality: 0.8,//图片质量
                                angle: 0, //
                                allowsEditing: false,//是否可以编辑
                                noData: false, //如果true 则禁用data生成的base64字段,(极大地提升图片的性能)
                                storageOptions: { skipBackup: true } //如果为true该照片不会备份到iCloud
                            }; 
                             
                    ImagePicker.showImagePicker(options, (response) => {
                         
                        console.log('Response = ', response);
                          
                        if (response.didCancel) {
                              
                            console.log('User cancelled photo picker');
    
                    } else if (response.error) {
                                  
                        console.log('ImagePicker Error: ', response.error);
    
                    } else if (response.customButton) {
                                      
                        console.log('User tapped custom button: ', response.customButton); 
                                   
                    } else { 
                                        
                        let source = { uri: response.uri }; 
                        // You can also display the image using data:
                        // let source = { uri: 'data:image/jpeg;base64,' + response.data }; 
                                         
                        this.setState({ avatarSource: source });
                     } 
                    });
                 } 
                                         
                        //选择视频
                                          
                        selectVideoTapped() {
                                              
                            const options = { 
                                                title: '选择视频',
                                                cancelButtonTitle: '取消',
                                                takePhotoButtonTitle: '录制视频',
                                                chooseFromLibraryButtonTitle: '选择视频', 
                                                mediaType: 'video', videoQuality: 'medium' 
                                            }; 
                                                
                                ImagePicker.showImagePicker(options, (response) => { 
    
                                                console.log('Response = ', response); 
    
                                         if (response.didCancel) { 
    
                                                console.log('User cancelled video picker'); 
    
                                    } else if (response.error) { 
                                                                
                                        console.log('ImagePicker Error: ', response.error);
                                                            
                                    } else if (response.customButton) { 
                                                                
                                        console.log('User tapped custom button: ', response.customButton); 
                                                            
                                    } else { 
                                                                
                                        this.setState({ videoSource: response.uri });
                                                             
                                    } 
                                                   
                                }); 
                                         
                            }
                        render() {
                            return (
                                <View style={styles.container}>
                                    <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}> 
                                    <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 30}]}>
                                        { this.state.avatarSource === null ?
                                        <Text>选择照片</Text> : 
                                        <Image style={styles.avatar} source={this.state.avatarSource} /> } 
                                    </View> 
                                    </TouchableOpacity>
                                    <TouchableOpacity 
                                        onPress={this.selectVideoTapped.bind(this)}>
                                        <View style={[styles.avatar, styles.avatarContainer]}> 
                                                <Text>选择视频</Text> 
                                        </View>
                                    </TouchableOpacity> 
    
                                        { 
                                            this.state.videoSource && 
                                        <Text style={{margin: 8, textAlign: 'center'}}>
                                            {this.state.videoSource}
                                            </Text> 
                                            }
    
                                </View> );
                                        } 
                            } 
                                const styles = StyleSheet.create({ 
                                    container: { 
                                        flex: 1,
                                        justifyContent: 'center', 
                                        alignItems: 'center', 
                                        backgroundColor: '#F5FCFF' },
                                avatarContainer: { 
                                    borderColor: '#9B9B9B', 
                                    borderWidth: 1 / PixelRatio.get(), 
                                    justifyContent: 'center', 
                                    alignItems: 'center' }, 
                                avatar: { 
                                    borderRadius: 50, 
                                    width: 100, 
                                    height: 100 } 
                                });
    

    展开全文
  • 在用React native做项目的时候,遇到了照片的压缩上传问题。在很多RN技术交流群中,询问到的结果也是让用原生。但这里就遇到了RN和原生之间的兼容问题。在不懈努力之下,终于找到了一个ImagePicker这个组件。当执行...
  • React Native组件只Image

    2016-12-10 13:16:13
    不管在Android还是在ios原生...静态图片资源从0.14版本开始,React Native提供了一个统一的方式来管理iOS和Android应用中的图片。要往App中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引
  • React Native请求用户权限 Request user permissions from React Native, iOS + Android 参考链接:https://www.npmjs.com/package/react-native-permissions 一、如何使用 1.1 添加组件库:npm install --save ...
  • React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。 通过《React NativeReact速学教程》你可以对React有更系统...
  • 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。 通过《React ...
  • 如果您曾经想过如何使用带有React Native的OpenCV处理图像,那么您来对地方了。 OpenCV与React Native一起使您能够在移动设备上处理图像 (最有可能要处理由设备相机拍摄的图像)。 这些的最大优点是: 易于实现。 ...
  • 在本系列中,您将学习如何使用React Native创建移动应用程序中常用的页面布局。 您正在创建的布局将无法使用-相反,本系列的主要重点是让您动手以布局React Native应用程序中的内容。 为了跟随本系列的进行,在您...
  • 在这篇文章中Android React Native的使用细节问题提到了 图片使用的问题,也提到了无论用哪种方法都不能加载app内部的图片资源的问题,当时的代码是这样子的 ('image!icon') } />在官方文档中也是这么写的Image但是...
  • 搞过原生Android开发的同学都清楚,Android 在6.0版本对权限管理做了很大的升级,其类似于IOS的管理管理方式需要用手动授权是否允许使用当前权限...为了解决6.0以上动态权限申请的问题,React Native提供了Permissio...
  • ReactNative下进行开发时如果有调用原生模块时,因为无法直接调试和输出日志,经常会感觉很麻烦。所以我们采用曲线救国的方式,从原生接口发送事件到JS端来进行控制台日志打印。包括其他的第三方开源组件一样可以...
  • 整理的一份 React Native 开发中常用的三方组件库大全。 完整的 App 使用React Native开发且功能完整的App。 序号 名称 简介 1 surmon.me.native 一个非常适合入门学习的react-native项目,有借鉴自其他种子...
  • http://www.hangge.com/blog/cache/detail_1618.htmlReact Native - 调用摄像头拍照(使用react-native-camera库) 发布:hangge阅读:68711,react-native-camera介绍react-native-camera 是一个第三方的开源库,...
  • 问题描述,github里react native社区的react-native-video 插件,一直以来存在安卓平台下无论怎么设props的rate={0}和pause={true}都会自动播放,不用琢磨了代码写对不对,其实是这个插件自己的问题。这个插件的问题...
  • react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱。react-native-image-picker使用1, 首先,安装下该插件。npm install react-native-image-picker@...
1 2 3 4 5 ... 20
收藏数 1,467
精华内容 586
关键字:

photo reactnative