native react 查看doc

2018-05-08 14:16:51 sinat_15847281 阅读数 176
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0课时 0分钟 0人学习 刘宏强
    免费试看
测试创建并运行Android项目:
react-native init AwesomeProjectcd AwesomeProjectreact-native run-android



React Native供了和web标准一致的Fetch APIXMLHttpRequest和WebSocket,可以来进行网络请求。
在Android中使用Activity继承ReactActivity,并且复写getMainComponentName的方法,返回的名称就是在RN js中注册的页面名称

组件查找,比较全,就是要用英文:https://js.coach/

再次定义原生方法
问题
1、打开android项目找不到com.facebook.react.ReactActivity,解决在gradle.properties中添加android.enableBuildCache=false,原因是AS升级到3.0以后缓存位置文件改变了

2、直接使用AS打包需要每次都生成离线JsBundle:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
3、某个module有问题,使用npm install modulename -save,重新安装可行,貌似是npm的bug
4、undefined is not an object (evaluating '_react.PropTypes.number') <unknown>...
原因是随着React Native的升级,系统废弃了很多的东西,过去我们可以直接使用 React.PropTypes 来进行属性确认,不过这个自 React v15.5 起就被移除了,转而使用prop-types库来进行替换 需要给项目添加yarn add prop-types/npm install --save prop-types,在需要引用的地方使用 import {PropTypes} from 'prop-types'
5、绑定this和参数的方法:
方法定义1-n个参数,写在前面,最后接event参数,bind后面接this,加上1-n个参数

6、使用props传值给component:
7、Image加载网络图片需要指定大小,否在默认为0*0,在下载完成后才会以真正的size来显示


2017-12-12 16:26:41 sinat_17775997 阅读数 3880
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0课时 0分钟 0人学习 刘宏强
    免费试看

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

React Native 文档查看组件:react-native-doc-viewer,可以在手机上直接打开文档,支持远程和本地文档。支持的文档格式:xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Android。

安装方法

  1. npm install react-native-doc-viewer --save

  2. react-native link react-native-doc-viewer

API说明

  • openDoc 打开远程货或本地文档

  • openDocb64 打开Base64字符串格式文档

  • openDocBinaryinUrl 打开二进制文件

  • playMovie 打开视频文件

使用示例

  1. import React, { Component } from 'react';

  2. import {

  3.    AppRegistry,

  4.    StyleSheet,

  5.    Text,

  6.    View,

  7.    Platform,

  8.    Button,

  9.    Alert,

  10.    ActivityIndicator

  11. } from 'react-native';

  12. import OpenFile from 'react-native-doc-viewer';

  13. var RNFS = require('react-native-fs');

  14. var SavePath = Platform.OS === 'ios' ? RNFS.MainBundlePath : RNFS.DocumentDirectoryPath;

  15. export default class Component02 extends Component {

  16.    static navigationOptions = ({ navigation }) => ({

  17.        title: `${navigation.state.params.name}`,

  18.    });

  19.    state = { animating: false }

  20.    /*

  21.    * Handle WWW File Method

  22.    * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing.

  23.    */

  24.    handlePress = () => {

  25.        this.setState({ animating: true });

  26.        if (Platform.OS === 'ios') {

  27.            OpenFile.openDoc([{

  28.                url: "https://calibre-ebook.com/downloads/demos/demo.docx",

  29.                fileNameOptional: "test filename"

  30.            }], (error, url) => {

  31.                if (error) {

  32.                    this.setState({ animating: false });

  33.                } else {

  34.                    this.setState({ animating: false });

  35.                    console.log(url)

  36.                }

  37.            })

  38.        } else {

  39.            //Android

  40.            this.setState({ animating: true });

  41.            OpenFile.openDoc([{

  42.                url: "https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg", // Local "file://" + filepath

  43.                fileName: "sample",

  44.                cache: false,

  45.                fileType: "jpg"

  46.            }], (error, url) => {

  47.                if (error) {

  48.                    this.setState({ animating: false });

  49.                    console.error(error);

  50.                } else {

  51.                    this.setState({ animating: false });

  52.                    console.log(url)

  53.                }

  54.            })

  55.        }

  56.    }

  57.    /*

  58.    * Handle Local File Method

  59.    * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing.

  60.    */

  61.    handlePressLocal = () => {

  62.        this.setState({ animating: true });

  63.        if (Platform.OS === 'ios') {

  64.            OpenFile.openDoc([{

  65.                url: SavePath + "demo.docx",

  66.                fileNameOptional: "test filename"

  67.            }], (error, url) => {

  68.                if (error) {

  69.                    this.setState({ animating: false });

  70.                } else {

  71.                    this.setState({ animating: false });

  72.                    console.log(url)

  73.                }

  74.            })

  75.        } else {

  76.            OpenFile.openDoc([{

  77.                url: SavePath + "demo.jpg",

  78.                fileName: "sample",

  79.                cache: false,

  80.                fileType: "jpg"

  81.            }], (error, url) => {

  82.                if (error) {

  83.                    this.setState({ animating: false });

  84.                } else {

  85.                    this.setState({ animating: false });

  86.                    console.log(url)

  87.                }

  88.            })

  89.        }

  90.    }

  91.    /*

  92.    * Binary in URL

  93.    * Binary String in Url

  94.    * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions

  95.    */

  96.    handlePressBinaryinUrl = () => {

  97.        this.setState({ animating: true });

  98.        if (Platform.OS === 'ios') {

  99.            OpenFile.openDocBinaryinUrl([{

  100.                url: "https://storage.googleapis.com/need-sure/example",

  101.                fileName: "sample",

  102.                fileType: "xml"

  103.            }], (error, url) => {

  104.                if (error) {

  105.                    console.error(error);

  106.                    this.setState({ animating: false });

  107.                } else {

  108.                    console.log(url)

  109.                    this.setState({ animating: false });

  110.                }

  111.            })

  112.        } else {

  113.            OpenFile.openDocBinaryinUrl([{

  114.                url: "https://storage.googleapis.com/need-sure/example",

  115.                fileName: "sample",

  116.                fileType: "xml",

  117.                cache: true

  118.            }], (error, url) => {

  119.                if (error) {

  120.                    console.error(error);

  121.                    this.setState({ animating: false });

  122.                } else {

  123.                    console.log(url)

  124.                    this.setState({ animating: false });

  125.                }

  126.            })

  127.        }

  128.    }

  129.    /*

  130.    * Base64String

  131.    * put only the base64 String without data:application/octet-stream;base64

  132.    * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions

  133.    */

  134.    handlePressb64 = () => {

  135.        this.setState({ animating: true });

  136.        if (Platform.OS === 'ios') {

  137.            OpenFile.openDocb64([{

  138.                base64: "",

  139.                fileName: "sample.png",

  140.                fileType: "png"

  141.            }], (error, url) => {

  142.                if (error) {

  143.                    console.error(error);

  144.                    this.setState({ animating: false });

  145.                } else {

  146.                    console.log(url)

  147.                    this.setState({ animating: false });

  148.                }

  149.            })

  150.        } else {

  151.            OpenFile.openDocb64([{

  152.                base64: "",

  153.                fileName: "sample",

  154.                fileType: "png",

  155.                cache: true

  156.            }], (error, url) => {

  157.                if (error) {

  158.                    console.error(error);

  159.                    this.setState({ animating: false });

  160.                } else {

  161.                    console.log(url)

  162.                    this.setState({ animating: false });

  163.                }

  164.            })

  165.        }

  166.    }

  167.    /*

  168.    * mp4 Video

  169.    */

  170.    handlePressVideo(video) {

  171.        this.setState({ animating: true });

  172.        if (Platform.OS === 'ios') {

  173.            OpenFile.playMovie(video, (error, url) => {

  174.                if (error) {

  175.                    console.error(error);

  176.                    this.setState({ animating: false });

  177.                } else {

  178.                    console.log(url)

  179.                    this.setState({ animating: false });

  180.                }

  181.            })

  182.        } else {

  183.            this.setState({ animating: false });

  184.            Alert.alert("Coming soon for Android")

  185.        }

  186.    }

  187.    setToggleTimeout() {

  188.        this.setTimeout(() => {

  189.            this.setState({ animating: !this.state.animating });

  190.            this.setToggleTimeout();

  191.        }, 2000);

  192.    }

  193.    render() {

  194.        return (

  195.            <View style={styles.container}>

  196.                <ActivityIndicator

  197.                    animating={this.state.animating}

  198.                    style={[styles.centering, { height: 80 }]}

  199.                    size="large" />

  200.                <Text style={styles.welcome}>

  201.                    Doc Viewer React Native

  202.        </Text>

  203.                <Button

  204.                    onPress={this.handlePress.bind(this)}

  205.                    title="打开远程文档"

  206.                    accessibilityLabel="See a Document"

  207.                />

  208.                <Button

  209.                    onPress={this.handlePressLocal.bind(this)}

  210.                    title="打开本地文档"

  211.                    accessibilityLabel="See a Document"

  212.                />

  213.                <Button

  214.                    onPress={this.handlePressBinaryinUrl.bind(this)}

  215.                    title="打开远程二进制文档"

  216.                    accessibilityLabel="See a Document"

  217.                />

  218.                <Button

  219.                    onPress={this.handlePressb64.bind(this)}

  220.                    title="打开Base64字符串"

  221.                    accessibilityLabel="See a Document"

  222.                />

  223.                <Button

  224.                    onPress={() => this.handlePressVideo("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4")}

  225.                    title="打开视频"

  226.                    accessibilityLabel="See a Document"

  227.                />

  228.            </View>

  229.        );

  230.    }

  231. }

  232. const styles = StyleSheet.create({

  233.    container: {

  234.        flex: 1,

  235.        justifyContent: 'center',

  236.        alignItems: 'center',

  237.        backgroundColor: '#F5FCFF',

  238.    },

  239.    welcome: {

  240.        fontSize: 20,

  241.        textAlign: 'center',

  242.        margin: 10,

  243.    },

  244.    instructions: {

  245.        textAlign: 'center',

  246.        color: '#333333',

  247.        marginBottom: 5,

  248.    },

  249. });

截图

示例源码

GitHub - forrest23/ReactNativeComponents: React Native组件大全

微信不让跳转外链,可以点击查看原文来查看外链GitHub内容。

组件地址

GitHub - philipphecht/react-native-doc-viewer: React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf)

转载http://mp.weixin.qq.com/s/K2AGelC_jOHeCkIDQa0gqw

2019-04-12 17:50:33 halaoda 阅读数 2756
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0课时 0分钟 0人学习 刘宏强
    免费试看

react-native-system-setting 修改系统设置
react-native-picker-select 数据选择
react-native-searchable-dropdown 下拉搜索框
lottie-react-native 动画封装库
VoiceLine-master 声音变化波浪效果
react-native-parallax-scroll-view 类似ScrollView组件
react-native-autoheight-webview 折叠
react-native-auto-height-image image图片
react-native-share 分享
react-scroll-paged-view 内部滚动
react-native-iphone-x-helper iPhone X适配
react-native-view-shot 截屏组件
react-native-doc-viewer 文档查看
react-native-data-table 表格组件
react-native-autocomplete-input 智能提示
react-native-modal-datetime-picker 时间选择器
react-native-torch 闪光灯
react-native-camera-kit 相机
react-native-countdown 倒计时
react-native-fileupload 文件上传
react-native-icons 图标
react-native-triangle 画三角形
react-native-image-picker 图片选择器
react-native-keychain iOS KeyChain管理
react-native-picker 滚轮选择器
react-native-picker-android Android 滚轮选择器
react-native-video 视频播放
react-native-simple-router 简易路由跳转框架
react-native-storage 持久化存储
react-native-sortable-listview 分类ListView
https://github.com/Cocoon-break/react-native-table-row

随机码生成:https://github.com/ai4code/react-native-verification-code
侧边栏ListView:https://github.com/johanneslumpe/react-native-selectablesectionlistview
视频播放:https://github.com/abbasfreestyle/react-native-af-video-player
时间轴:https://github.com/thegamenicorus/react-native-timeline-listview
数据表格:https://github.com/Gil2015/react-native-table-component
动画渲染指示:https://github.com/archriss/react-native-animated-steps
用户指南::https://github.com/mohebifar/react-native-copilot
用户指南:https://github.com/liuzheng644607/react-native-intro
聊天ui:https://github.com/DaiYz/react-native-easy-chat-ui
全局异常捕获:https://github.com/master-atul/react-native-exception-handler
展示更多:https://github.com/AmyrAhmady/react-native-show-more-button
步骤指示器:https://github.com/hamraa/react-native-steps
步骤指示器:https://github.com/mu29/react-stepper
步骤指示器:https://github.com/colbymillerdev/react-native-progress-steps
滑动指示器:https://github.com/robertgonzales/react-step-range-slider
复选框组件:https://github.com/tiaanduplessis/react-native-modest-checkbox
Toast组件:https://github.com/crazycodeboy/react-native-easy-toast
Toast组件:https://github.com/guangqiang-liu/react-native-toastAndLoading
Toast组件:https://github.com/search?q=react-native-root-toast
拖放旋转组件:https://github.com/keske/react-native-easy-gestures
md5加密:https://github.com/kmend/react-native-md5
进度圈指示器:https://github.com/MrToph/react-native-progress-circle
内联指示器:https://github.com/mathieudutour/react-progress-button
活动指示符:https://github.com/n4kz/react-native-indicators
加载过渡图片:https://github.com/ArunMichaelDsouza/react-image-appear
播放声音:https://github.com/zmxv/react-native-sound
底部弹出框:https://github.com/prscX/react-native-bottom-action-sheet
底部弹出框:https://github.com/NYSamnang/react-native-raw-bottom-sheet
刷新:https://github.com/passpier/react-native-smooth-pull-to-refresh
简单闪烁:https://github.com/oblador/react-native-shimmer
tab标签切换:https://github.com/kirankalyan5/react-native-segmented-control-tab
html展示:https://github.com/archriss/react-native-render-html
国家选择器:https://github.com/xcarpentier/react-native-country-picker-modal
自定义图片排列:https://github.com/Luehang/react-native-masonry-list
自定义图片排列:https://github.com/brh55/react-native-masonry
html转pdf:https://github.com/christopherdro/react-native-html-to-pdf
文本框输入事件:https://github.com/baijunjie/react-native-input-scroll-view
仿支付界面输入框:https://github.com/FE-Lockie/react-native-pay-password
倒计时组件:https://github.com/talalmajali/react-native-countdown-component
url预览器:https://github.com/maherzaidoune/react-native-url-preview
反应原生的地址簿:https://github.com/cq0702/react-native-sectionlist-contacts
车速表组件:https://github.com/pritishvaidya/react-native-speedometer
车速表组件:https://github.com/LucasMonteiro1/react-native-speedometer-chart
反应原生滑动手势:https://github.com/glepur/react-native-swipe-gestures
反应原生的UI组件的集合:https://github.com/unioslo/react-native-usit-ui
自动链接:https://github.com/joshswan/react-native-autolink
多个(单个)选择:https://github.com/renrizzolo/react-native-sectioned-multi-select
浮动框:https://github.com/santomegonzalo/react-native-floating-action
城市选择器:https://github.com/LiuC520/react-native-city-pick/
符号组件:https://github.com/xiewang/react-native-emoticons
五彩纸屑:https://github.com/cdvntr/react-native-confetti
radialj渐变:https://github.com/surajitsarkar19/react-native-radial-gradient
打电话:https://github.com/tiaanduplessis/react-native-phone-call
卡片视图:https://github.com/Kishanjvaghela/react-native-cardview
多样式图片布局:https://github.com/archriss/react-native-snap-carousel
分段器:https://github.com/wix/react-native-custom-segmented-control
类似+号:https://github.com/Osedea/react-native-plus-button-box
多图上传:https://github.com/syanbo/react-native-syan-image-picker
多图裁剪:https://github.com/mg365/react-native-customized-image-picker
交互视图:https://github.com/wix/react-native-interactable
密码组件:https://github.com/includable/react-native-keycode
密码组件:https://github.com/gkueny/react-native-pin-code
解析Text文本:https://github.com/taskrabbit/react-native-parsed-text
切换选择器:https://github.com/App2Sales/react-native-switch-selector
button状态:https://github.com/sonaye/react-native-micro-animated-button
摇一摇:https://github.com/lhandel/react-native-card-stack-swiper
摇一摇:https://github.com/alexbrillant/react-native-deck-swiper
摇一摇:https://github.com/patrickkempff/react-native-shake-event
选项卡:https://github.com/exponentjs/react-native-tab-navigator
表单验证:https://github.com/gcanti/tcomb-form-native
聊天:https://github.com/FaridSafi/react-native-gifted-chat
地图:https://github.com/lelandrichardson/react-native-maps
动画:https://github.com/oblador/react-native-animatable
国际化:https://github.com/joshswan/react-native-globalize
二维码:https://github.com/ideacreation/react-native-barcodescanner
制作本地库:https://github.com/frostney/react-native-create-library
影音:https://github.com/MisterAlex95/react-native-record-sound
安卓录音:https://github.com/bosung90/react-native-audio-android
3D触摸:https://github.com/madriska/react-native-quick-actions
弹出框:https://github.com/beefe/react-native-actionsheet
弹出框:https://github.com/instea/react-native-popup-menu
键盘:https://github.com/reactnativecn/react-native-inputscrollview
键盘:https://github.com/wix/react-native-keyboard-aware-scrollview
键盘:https://github.com/APSL/react-native-keyboard-aware-scroll-view
键盘:https://github.com/douglasjunior/react-native-keyboard-manager
键盘:https://github.com/johanneslumpe/react-native-keyboardevents
键盘:https://github.com/Andr3wHur5t/react-native-keyboard-spacer
键盘:https://github.com/zubricky/react-native-android-keyboard-adjust
本地存储:https://github.com/sunnylqm/react-native-storage
二维码:https://github.com/lazaronixon/react-native-qrcode-reader
通讯录:https://github.com/zavven/react-native-alphabetlistview
通讯录:https://github.com/rt2zz/react-native-contacts
加密:https://www.npmjs.com/package/crypto-js
缓存管理:https://github.com/reactnativecn/react-native-http-cache
图片和base64互转:https://github.com/xfumihiro/react-native-image-to-base64
炫酷TextInput:https://github.com/beefe/react-native-textinput
炫酷TextInput:https://github.com/halilb/react-native-textinput-effects
炫酷TextInput:https://github.com/zbtang/React-Native-TextInputLayout
WebView相关:https://github.com/alinz/react-native-webview-bridge
横竖屏:https://github.com/yamill/react-native-orientation
PDF:https://github.com/cnjon/react-native-pdf-view
设备信息:https://github.com/rebeccahughes/react-native-device-info
手势放大缩小移动:https://github.com/kiddkai/react-native-gestures
手势放大缩小移动:https://github.com/johanneslumpe/react-native-gesture-recognizers
下拉刷新的listview:https://github.com/syrusakbary/react-native-refresher
下拉刷新的listview:https://github.com/FaridSafi/react-native-gifted-listview
下拉刷新的listview:https://github.com/jsdf/react-native-refreshable-listview
HTML视图:https://github.com/jsdf/react-native-htmlview
时间:https://github.com/xgfe/react-native-datepicker
时间:https://github.com/lanjingling0510/react-mobile-datepicker
时间:https://github.com/pandiaraj44/react-native-datepicker-dialog
时间:https://github.com/pinguinjkeke/react-native-wheel-datepicker
多选时间:https://github.com/Kiprosh/react-multiple-datepicker
签名:https://github.com/jgrancher/react-native-sketch
listview回到顶部:https://github.com/yzsolo/react-native-scrolltotop
高德地图:https://github.com/Eleme-IMF/dodo
时间轴:https://github.com/24ark/react-native-step-indicator
时间轴:https://github.com/thegamenicorus/react-native-timeline-listview
进度条:https://github.com/Yenole/react-native-easy-loading
进度条:https://github.com/bgryszko/react-native-circular-progress
进度条:https://github.com/joinspontaneous/react-native-loading-spinner-overlay
rn蓝牙通信:http://blog.csdn.net/withings/article/details/71378562
版本更新:https://github.com/parryworld/react-native-appupdate
分享组件:https://github.com/naoufal/react-native-activity-view
可折叠 :https://github.com/oblador/react-native-collapsible
网格视图:https://github.com/lucholaf/react-native-grid-view
地图 :https://github.com/mapbox/react-native-mapbox-gl
视差效果 :https://github.com/oblador/react-native-parallax
选择器:https://github.com/beefe/react-native-picker
气泡框:https://github.com/jeanregisser/react-native-popover
气泡框:https://github.com/doomsower/react-native-modal-popover
导航控制器 :https://github.com/t4t5/react-native-router
滑动选项卡:https://github.com/skv-headless/react-native-scrollable-tab-view
加载动画:https://github.com/maxs15/react-native-spinkit
加载:https://github.com/naoufal/react-native-progress-hud
SVG图片 :https://github.com/brentvatne/react-native-svgkit
iOS原生UISearchBar:https://github.com/umhan35/react-native-search-bar
iOS原生:https://github.com/wix/react-native-controllers
iOS原生TableView:https://github.com/aksonov/react-native-tableview
iOS原生UITableview:https://github.com/jondot/awesome-react-native
图标:https://github.com/oblador/react-native-vector-icons
ListView优化 :https://github.com/sghiassy/react-native-sglistview
逆向滑动:https://github.com/expo/react-native-invertible-scroll-view
颜色选择器:https://github.com/instea/react-native-color-picker
绘图库 :https://github.com/capitalone/react-native-pathjs-charts
绘图库 :https://github.com/wuxudong/react-native-charts-wrapper
3D动画:https://github.com/rastapasta/react-native-gl-model-view
通知:https://github.com/KBLNY/react-native-message-bar
搜索组件:https://github.com/agiletechvn/react-native-search-box
占位:https://github.com/mfrachet/rn-placeholder
stylesheet扩展 :https://github.com/sabeurthabti/react-native-css
stylesheet扩展 :https://github.com/vitalets/react-native-extended-stylesheet
小组件:https://github.com/xinthink/react-native-material-kit
小组件:https://github.com/react-native-training/react-native-elements
小组件:https://github.com/react-native-material-design/react-native-material-design
小组件:https://rghorbani.github.io/react-native-common/
小组件:https://github.com/GeekyAnts/NativeBase
抽屉:https://github.com/root-two/react-native-drawer
抽屉:https://github.com/react-native-fellowship/react-native-side-menu
侧滑按钮:https://github.com/dancormier/react-native-swipeout
侧滑按钮:https://github.com/jemise111/react-native-swipe-list-view
图表:https://github.com/wuxudong/react-native-charts-wrapper
图表:https://github.com/tomauty/react-native-chart
日历 :https://github.com/wix/react-native-calendars
日历 :https://github.com/christopherdro/react-native-calendar
日历:https://github.com/cqm1994617/react-native-myCalendar
悬浮按钮:https://github.com/mastermoo/react-native-action-button
按钮:https://github.com/ide/react-native-button
按钮特效:https://github.com/dwicao/react-native-circle-button
酷炫折叠动画:https://github.com/jmurzy/react-native-foldview
表单:https://github.com/FaridSafi/react-native-gifted-form
颜色渐变:https://github.com/react-native-community/react-native-linear-gradient
欢迎界面:https://github.com/FuYaoDe/react-native-app-intro
启动页:https://github.com/remobile/react-native-splashscreen
启动页:https://github.com/crazycodeboy/react-native-splash-screen
可折叠:https://github.com/naoufal/react-native-accordion
单选多选:https://github.com/hinet/react-native-checkboxlist
单选按钮:https://github.com/sconxu/react-native-checkbox
照片墙:https://github.com/ldn0x7dc/react-native-gallery
星星评价:https://github.com/djchie/react-native-star-rating
跑马灯:https://github.com/remobile/react-native-marquee-label
图片加载:https://github.com/oblador/react-native-image-progress
加载:https://github.com/joinspontaneous/react-native-loading-spinner-overlay
毛玻璃:https://github.com/react-native-fellowship/react-native-blur
毛玻璃:https://github.com/voronianski/react-native-effects-view
图片查看:https://github.com/oblador/react-native-lightbox
图片组件:https://github.com/DylanVann/react-native-fast-image
图片组件:https://github.com/ascoders/react-native-image-viewer
轮播视图:https://github.com/race604/react-native-viewpager
轮播视图:https://github.com/geek-prince/react-native-page-scrollview
轮播视图:https://github.com/appintheair/react-native-looped-carousel
轮播视图:https://github.com/leecade/react-native-swiper
轮播视图:https://github.com/nick/react-native-carousel
轮播视图:https://github.com/gusgard/react-native-swiper-flatlist
弹框视图:https://github.com/maxs15/react-native-modalbox
弹框视图:https://github.com/brentvatne/react-native-modal
弹框视图:https://github.com/JamesWatling/react-native-list-view-select
弹框视图:https://github.com/bodyflex/react-native-simple-modal
图片上拉:https://github.com/lelandrichardson/react-native-parallax-view
九宫格:https://github.com/spikef/react-native-gesture-password
瀑布流:https://github.com/xudafeng/autoresponsive-react-native
图片显示:https://github.com/Dharmoslap/react-native-responsive-image
二级菜单:https://github.com/vczero/react-native-tab-menu
工具提示:https://github.com/chirag04/react-native-tooltip
本地上传:https://github.com/aroth/react-native-uploader
搜索框:https://github.com/tuantle/react-native-search-header
下拉 :https://github.com/alinz/react-native-dropdown
下拉 :https://github.com/mxck/react-native-material-menu
下拉:https://github.com/search?q=react-native-modal-dropdown
下拉:https://github.com/react-native-studio/react-native-SmartRefreshLayout
简单警告:https://github.com/testshallpass/react-native-dropdownalert

2016-01-06 13:07:46 yczz 阅读数 52549
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0课时 0分钟 0人学习 刘宏强
    免费试看
摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?使用React Native的正确姿势又是怎样呢?

H5、React Native、Native应用对比分析

离上次在北京开源中国盛典已经快一个月了,有点想念@oschina的小伙伴了。我必须承认oschina是国内最大的同性社交网站,这也是无可争议的事实,但是,我真想的是妹子!!![偷笑]。从上次演讲后,有一些同学陆陆续续问我演讲的PPT在哪,还有不少同学希望看到[手稿],这学习精神,在下实在是佩服啊。有着这么热情的小伙伴,我激动不已啊,所以在此公布[手稿],方便大家可以将[PPT]和[手稿]双手齐下,:)。2015年,我们要一起努力完成以前吹过的牛逼.....  下面是[多图预警],请考虑切wifi,土豪请无视我,也可拿红包砸我,:)   

---------------华丽丽的分割线,主题开始---------------------

“存在即合理”。凡是存在的,都是合乎规律的。任何新事物的产生总要的它的道理;任何新事物的发展总是有着取代旧事物的能力。React Native来的正是时候,一则是因为H5发展到一定程度的受限;二则是移动市场的迅速崛起强调团队快速响应和迭代;三则是用户的体验被放大,用户要求极致的快感,除非你牛x(例如:12306最近修改手机号需要用户自己发短信接收验证码)。

以下简单的介绍下H5、React Native、Native的含义

最近三四年间,国内外的前端与全栈开发者社区都在坚持不懈地追寻使用JavaScript与HTML、CSS技术体系开发App内场景的核心工程技术。这种技术,在国内很多公司与团队中,被通称为H5。——童遥

这段是取自@童老师给小二我新书作的序,没有断章取义的意思。很清楚,H5并不是狭义的HTML5新标签和API,而是工程化的“In App” technology。

iOS/Android ——原生应用(都懂得,不解释)。

React Native —— React & Native ,应运而生!

一、React Native的出现

React Native的出现,似乎是扛起的反H5的旗子。就像当年Facebook放弃H5,全部转向Native一样。这一点,我们需要认同和保持高度的清醒。那么,React Native是否又是在吞食Native的领地呢?技术的发展,是用户风向标的导向起的作用。任何一门技术的出现,都是当时用户需求的体现。

我们应该从以下几点看待React Native的出现。

"鉴往知来"——从过去的教训中总结经验,从用户的角度开拓未来,用户更希望产品迭代和稳定寻求一种平衡
“HTML5差强人意,但是与原生应用相比还是有些差距”——为了更高的追求! 用户体验!
“人才宝贵,快速迭代”——Web开发者相对较多,寻找平衡点
“跨平台!跨平台!跨平台!”——单一技术栈,开发者的福音
“xx是世界上最好的语言” ——工程学的范畴,没有最好,只有最适合,我还是补充一句,JS还是很好很好的。

HTML5 vs React Native ? HTML5 : React Native
结论(React Native):
1、原生应用的用户体验
2、跨平台特性
3、开发人员单一技术栈
4、上手快,入门容易
5、社区繁荣

二、3款应用效果

注:以下所有对比均在iOS平台下



上面3张图片,如果去掉第一张图的“HybirdApp”的字样,是否分得清哪个是React Native开发?哪个是Native应用。
你的第一感觉是什么?

三、工程方案

为了评估3种方案的技术优势和弱势。我们需要开发功能大致相似的App。这里,我们使用了“豆瓣”的API来开发“豆搜”应用。该应用能够搜索“图书”、“音乐”、“电影”。想当年,豆瓣以“图书评论”走红,尤其是12年当红!豆瓣是一个清新文艺的社区,一个“慢公司”。最近有一则网传消息,注意是网传——“传京东投1.5亿美元控股豆瓣”。今天,不聊豆瓣,我们要聊一个工程化的问题。

我们需要将3款App的功能做到一致,同时需要保持技术要点一致。比如React Native这里使用了TabBar,那么Native我们也必须使用TabBar。简单而言就是:功能一致,组件 & API一致。我们功能如下图所示:

1、H5方案
在H5/Hybird应用中,我们使用AngularJS开发单页webApp,然后将该WebApp内嵌入到iOS WebView中,在iOS代码中,我们使用Navigation稍微控制下跳转。
WebApp地址:http://vczero.github.io/search/html/index.html
WebApp项目地址:https://github.com/vczero/search (很简单的一个项目)
H5/Hybird项目地址:https://github.com/vczero/search_Hybird

2、React Native
在React Native中,封装必要的功能组件。
项目地址:https://github.com/vczero/React-Dou。
项目结构如下图:

3、Native(iOS)
使用React Native大致相同的组件开发App,不使用任何第三方库,代码布局。
项目地址:https://github.com/vczero/iOS-Dou

四、对比分析

很多时候,新技术的采用最希望看到的是数据,而不是简单说“用户体验棒,开发效率高,维护成本低”。不过,生活中也有这样的同学,知一二而能窥全貌。当然,本人生性胆小,也没有那么多的表哥和隔壁的老王,所以不敢早下定论,不敢太放肆。赵本山在《大笑江湖》中有句名言“May the force be with you”(别太放肆,没什么用)。因此,从以下几个方面做一个简单的对比。

---------------分析提纲----------------

1、开发方式

(1)代码结构
(2)UI布局
(3)UI截面图
(4)路由/Navigation
(5)第三方生态链

2、性能 & 体验

(1)内存
(2)CPU
(3)动画
(4)安装包体积
(5)Big ListView
(6)真机体验

3、更新 & 维护

(1)更新能力
(2)维护成本
-----------------提纲---------------

1、开发方式

很多人说React Native的代码不好看,不好理解。那是因为前端工程师都熟悉了Web的开发方式。怎么解决这个问题呢,可以先看看iOS代码,断定不熟悉iOS的同学心里会默念“一万匹**马奔腾”。那时候,你再看React Native,你会觉得使用React Native开发App是件多么美好的事!OK,我们先来看下三者在开始“一款简单App”的代码结构。
(1)代码结构
H5/Hybird的开发模式,我们需要维护3套代码,两套是Native(iOS/Android)代码,一套是WebApp版本。这里,我们使用AngularJS作为WebApp单页开发框架。如下图所示。

在React Native中,同样需要关注部分的Native代码,但是大部分还是前端熟悉的JavaScript。在“豆搜”应用中,代码结构如下:

在Native开发中,更加强调Native开发者的能力。平台是:iOS/Android。

结论:从前端角度而言,React Native跨平台特性,不要开发者深入的了解各平台就能开发一款高效App。同时,语言层面而言,JavaScript运用很广泛,入门门槛相对较低。React Native虽然抛弃了MVC分离实践,但是从业务角度而言,更为合理。一切而言:对前端,对移动领域是利好的消息。

(2)UI布局
“面容姣好”,合理的UI却总是跟着时间在变。那么UI布局就不是小事。
Web开发布局目前大多是 DIV + CSS。
React Native的布局方式是Flexbox。

   //JSX
  <ScrollView style={styles.flex_1}>
    <View style={[styles.search, styles.row]}>
      <View style={styles.flex_1}>
        <Search placeholder="请输入图书的名称" onChangeText={this._changeText}/>
      </View>
      <TouchableOpacity style={styles.btn} onPress={this._search}>
        <Text style={styles.fontFFF}>搜索</Text>
      </TouchableOpacity>
    </View>
    {
      this.state.show ?
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
        />
      : Util.loading
    }
  </ScrollView>
  //样式
  var styles = StyleSheet.create({
      flex_1:{
        flex:1,
        marginTop:5
      },
      search:{
        paddingLeft:5,
        paddingRight:5,
        height:45
      },
      btn:{
        width:50,
        backgroundColor:'#0091FF',
        justifyContent:'center',
        alignItems:'center'
      },
      fontFFF:{
        color:'#fff'
      },
      row:{
        flexDirection:'row'
      }
    });

而Native布局就有种让你想吐的感觉,尤其是iOS的布局。这里不是指采用xib或者Storyboard,而是单纯的代码,例如添加一个文本:

UILabel *publisher = [[UILabel alloc]init];
publisher.frame = CGRectMake(bookImgWidth + 10, 50, 200, 30);
publisher.textColor = [UIColor colorWithRed:0.400 green:0.400 blue:0.435 alpha:1];
publisher.font = [UIFont fontWithName:@"Heiti TC" size:13];
publisher.text = obj[@"publisher"];
[item addSubview:publisher];

总结:React Native既综合了Web布局的优势,采用了FlexBox和JSX,又使用了Native原生组件。比如我们使用一个文本组件。
<Text style={{width:100;height:30;backgroundColor:'red'}}>测试</Text>

(3)UI截面图
Hybrid方式截面图

可以看到第一层列表页是完整的布局,实际上这就是Web页面;而第二层灰色的是Native的WebView组件。
iOS UI截面图


可以看到Native页面的组件特别多,即使是列表页,其中某一项都是一个组件(控件)。

当然,我们就会想,能够完全调用原生组件呢?那样性能是否更好?
React Native UI截面图


可以清楚的看到React Native调用的全部是Native组件。并且层次更深,因为React Native做了组件的封装。如上图,蓝色边框的就是RCTScrollView组件。这就是React Native相比H5更高效的原因。

(4)路由/Navigation
在Web单页面应用中,路由由History API实现。
而React Native采用的路由是原生的UINavigationController导航控制器实现。
React Native NavigatorIOS组件封装程度高;Navigator可定制化程度高。
Navigator方法如下:

getCurrentRoutes() - returns the current list of routes
jumpBack() - Jump backward without unmounting the current scene
jumpForward() - Jump forward to the next scene in the route stack
jumpTo(route) - Transition to an existing scene without unmounting
push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to
pop() - Transition back and unmount the current scene
replace(route) - Replace the current scene with a new route
replaceAtIndex(route, index) - Replace a scene as specified by an index
replacePrevious(route) - Replace the previous scene
immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
popToTop() - Pop to the first scene in the stack, unmounting every other scene

相对Native而言,这些接口更Native还是很相似的。

//iOS UINavigationController  
//相对Web而言,不用自己去实现路由,并且路由更加清晰         
[self.navigationController pushViewController:detail animated:YES];

"豆搜" WebApp路由(基于AngularJS)如下:

"豆搜" React Native版本导航如下:

"豆搜" iOS版本导航代码如下:

总结:React Native封装的导航控制更容易理解。

(5)第三方生态链
“我的是我的,你的也是我的。 ”——我不是“疯狂女友”,我是React Native!
我们缺少“城市列表”组件,OK,使用JSX封装一个;觉得性能太低,OK,基于React Native方案封装一个原生组件。
这个iOS图表库不错,拿来用呗! => 完美!
这一切都是基于React Native提供的模块扩展方案。
所以说:iOS第三方库 + 部分JavaScript库 = React Native 生态库(可以知道,基于React Native的扩展方案是多么方便)

2、性能 & 体验

我们都很关注一款App性能。因此测试和体验App的性能很重要。以下测试,都是基于相同的case。
测试平台:模拟器,iphone6,iOS8.4
(1)内存
首先,我们来看下Native应用占用的内存情况。一开始,原生应用启动后,占用内存是20~25M;针对相同的case,跑了2min,结果如下图:

可以看出,峰值是87.9M,均值是72M;内存释放比较及时。

我们再来看下Hybird App的情况。App已启动,占用内存35~55M;同样,跑了2min以上,结果如下图:

可以看出,峰值在137.9M,因为整个应用在WebView中,内存释放不明显,存在缓存。

最后,看下React Native的情况。App启动占用内存35~60M,同样跑2min以上,结果如下图:

可以看出,峰值在142M,内存相对释放明显。

总结:React Native和Web View在简单App上相差不大。二者主要:内存消耗主要是在网页数据上。

(2)CPU
我们可以看一下Native应用程序CPU的情况,最高值在41%。

Hybird App的最高值在30%。

React Native的最高值在34%。

总结:CPU使用率大体相近,React Native的占用率低于Native。

(3)动画
React Native提供了Animated API实现动画。简单效果,基本OK。个人觉得React Native不适合做游戏,尤其布局能力。
Native Animation提供UIView动画
H5/Hybird:采用js动画能力
总结:React Native Animated API / 封装Native动画库 可以满足基本需求

(4)安装包体积
Hybird App:
34(App壳) + 5(HTML) + 125(Angular) + 29(An-route) + 6(min.js) + 4(min.css) = 203 KB。

React Native:
不含bundle: 843KB
含bundle: 995KB

Native
83KB

React Native框架包大小
843(不含bundle) - 32(Hybird_app空壳,初识项目) = 811KB

相比快速迭代和热更新,比Native多了811KB一点都不重要,我们将图片素材、静态资源线上更新缓存起来即可减少很多体积。
总结:牺牲一点体积,换更大的灵活性!(世界上哪有那么美的事,除非丑,就会想得美,:) )。

(5)Big ListView & Scroll 性能
循环列表项500次: H5页面惨不忍睹
React Native还可以接受
Native 采用UITabView更高效,因为不渲染视图外部分。

(6)真机体验
机型:iphone4s,iOS7
Native > React Native > Hybird
如果非要给个数字的话,那我个人主观感受是:
Native: 95%+ 流畅度
React Native: 85~90% 流畅度
H5/Hybird: 70% 流畅度

总结:Native/React Native的体验相对而言更流畅。

3、更新 & 维护

(1)更新能力
H5/Hybird: 随时更新,适合做营销页面,目前携程一些BU全部都是H5页面;但是重要的部分还是Native。
React Native:React Native部分可以热更新,bug及时修复。
Native:随版本更新,尤其iOS审核严格,需要测试过关,否则影响用户。

(2)维护成本
H5/Hybird: Web代码 + iOS/Android平台支持
React Native:可以一个开发团队 + iOS/Android工程师;业务组件颗粒度小,不用把握全局即可修改业务代码。
Native:iOS/Android开发周期长,两个开发团队。

总结:React Native 统一了开发人员技术栈,代码维护相对容易。

五、综合

1、开发方式

(1)代码结构: React Native更为合理,组件化程度高
(2)UI布局:Web布局灵活度 > React Native > Native
(3)UI截面图:React Native使用的是原生组件,
(4)路由/Navigation:React Native & Native更胜一筹
(5)第三方生态链:Native modules + js modules = React Native modules

2、性能 & 体验

(1)内存:Native最少;因为React Native含有框架,所以相对较高,但是后期平稳后会优于Native。
(2)CPU:React Native居中。
(3)动画:React Native动画需求基本满足。
(4)安装包体积:React Native框架打包后,811KB。相比热更新,可以忽略和考虑资源规划。
(5)Big ListView
(6)真机体验:Native >= React Native > H5/Hybrid

3、更新 & 维护

(1)更新能力: H5/Hybird > React Native > Native
(2)维护成本: H5/Hybird <= React Native < Native

React Native定制难度相比Native有些大;但是具备跨平台能力和热更新能力。      

说了这么多,最后个人建议:

一个新的App完全可以采用React Native开发,这样成本会低很多。    

关于演讲:

PPT: http://www.oschina.net/doc/24007

视频:http://www.oschina.net/question/865233_2145334 (这个演讲在移动专场下半场开场)       

六、图书 & 工作机会

最后说一下图书《React Native入门与实战》吧。这是一本[难产]的家伙,15年写的比较顺利,最后因为北京雾霾,印刷厂偶尔停工,一直在难产。前段时间,图书发往各地书店,到店比较迟,我猜测是因为雾霾,找不到高速出口~~目前该书由人民邮电出版社图灵原创出版,已经开卖了。本书主要是希望带领大家一起进入React Native开发领域,针对每个API和组件都有详细的案例,同时为了更好的实战,最后3章以实际案例(通讯录App,LBS App,基于豆瓣OpenAPI的搜索 App)给出,供大家参考。觉得入门是完全没问题的,后期大家可以一起交流,争取丰富国内React Native社区。   

《React Native入门与实战》各网站购买地址:

京东:http://item.jd.com/10089810271.html (目前应该都有货了,微信有同学传照片给我看了,铁粉哈)

            http://item.jd.com/11844102.html (京东自营,货源需要跟客服确认哦)

互动:http://product.china-pub.com/4904552 (已经有货)

天猫:https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.21.rc0yeu&id=525484671101&cat_id=2&rn=4690ef5b4e06412ffae4d1cc4f4dcc9a&user_id=1020536390&is_b=1 (天猫这家卖的还可以,不知道为啥京东看不到数据,京东应该才是技术买书的最爱啊,听说也预售了不少呢)

      

2017-02-16 09:45:59 sinat_17775997 阅读数 849
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    0课时 0分钟 0人学习 刘宏强
    免费试看