用什么开发react-native_移动端开发用react还是react-native - CSDN
精华内容
参与话题
  • 市面上用于开发工作的编辑器非常多,笔者会经常因为不同的编程语言该如何选择...而在随后从事 React Native 开发工作过程中,对相应的编辑器做了一些探索和研究,本文总结了一些非常适合移动应用开发的编辑器和 IDE。

    市面上用于开发工作的编辑器非常多,笔者会经常因为不同的编程语言该如何选择好用的编辑器而感到纠结。而在随后从事 React Native 开发工作过程中,对相应的编辑器做了一些探索和研究,本文总结了一些非常适合移动应用开发的编辑器和 IDE。

    1. Nuclide

    Nuclide 是基于 Atom 之上构建的单独的一个包,其提供可编程性且社区非常活跃。它为 React Native、Hack 和 Flow 项目提供一流的开发环境。

    2. Atom

    Atom 是一款现代化、易用、可控的文本编辑器。Atom 被开发人员广泛应用于多种编程语言。它有一个庞大而活跃的社区,诞生了很多有用的插件。

    Atom 常用的包:

    • atom-react-native-autocomplete package - 该包针对 React-Native,为 Atom 编辑器提供自动补全功能。
    • atom-react-native-css - 这是一个内置支持 SASS、SCSS 的 React-Native 组件的包。React-native-css 将有效的 CSS、SASS转换为 CSS 的 Facebook 子集。
    • react-native-snippets - 该包是 Atom和 Nuclide 的 React Native 片段。
    • zenchat-snippets - 它是react-native、redux 和 ES6 的片段集合。
    • atom-xcode - 用于集成 Mac Xcode 和 atom。安装之后,iOS 模拟器可以在 atom 内进行控制。
    • language-babel - 包含所有 JavaScript 版本的语法,包括 ES2016 和 ESNext、用于 Facebook React 的 JSX 语法、以及 Atom 的 etch。

    3. Sublime Text

    Sublime Text 是一个复杂的文本编辑器,可用于编写代码、做标记和编写普通文本。社区提供了大量的插件扩展其功能。Sublime Text 一直是开发人员最喜欢的编辑器。

    Sublime Text 常用包

    4. Visual Studio Code

    Visual Studio Code 是由 Microsoft 为 Windows、Linux 和 OS X 开发的源代码编辑器。它是免费和开源的,支持调试、嵌入式 Git 控件、语法高亮、智能代码补全、代码段和代码重构。

    扩展

    • ReactNative Tools - 此扩展为React Native 项目提供了开发环境。你可以调试代码,从命令终端快速运行 react-native 命令,并使用 IntelliSense 浏览 React Native API 的对象、函数和参数。
      Vim编辑器

    5. Vim 编辑器

    Vim 是一种高度可配置的文本编辑器,可以非常高效地创建和更改任何类型的文本。大多数 UNIX 系统都以 “vi” 的形式支持它。许多开发人员喜欢使用 Vim 进行各种编辑工作。Vim 非常稳定,并且在不断发展而变得更好。

    Vim 插件

    • vim-jsx - 提供 JSX 的语法高亮和缩进。
    • vim-react-snippets - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段。
    • vim-babel - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段。

    6. GNU Emacs 编辑器

    GNU EMACS 是一个可扩展、可定制、免费、自由的文本编辑器。

    扩展

    • web-mode.el - 它是一个自主的 emacs 主模块,用于编辑 Web模板。它与许多语言兼容,包括 JSX(React)。

    7. Spacemacs 编辑器

    • 官网:http://spacemacs.org/
    • Github 项目地址:syl20bnr/spacemacs(https://github.com/syl20bnr/spacemacs)
    • 文档:
    • License:开源
    • 支持平台:Windows、Mac、Linux
    • 特性:
      • 密钥绑定使用助记符前缀进行组织
      • 可发现 - 创新的实时显示可用的键绑定。
      • 相似的功能具有与之相同的密钥
      • 简单的查询系统可以快速找到可用的层、包等。
      • 社区驱动的配置提供了强大的用户可调的包,bug 可被快速修复。

    Spacemacs 是一个社区驱动的 Emacs 发行版 - 最好的编辑器既不是 Emacs 也不是Vim,它是 Emacs 和 Vim 相结合!

    扩展

    • React layer - 适用于 React 的 ES6 和 JSX 配置层。它将自动识别 .jsx 和 .react.js 文件。一个用于 React集成的包层。

    8. Deco IDE

    Deco 是专为 React Native 打造的 IDE。它是一个用于编写 React Native 应用程序的一体化解决方案,无需任何环境设置即可下载和使用。Deco 专注于组件重用,并支持用户对 UI 的实时编辑,从而改进了React Native 开发工作流程。

    9. WebStorm

    WebStorm 建立在开源 IntelliJ 平台之上,JetBrains 已经开发和完善了15多年。它提供与 VSC、本地历史功能的紧密集成,具有充满活力的插件生态系统,是完全可配置的,还提供大量其他的功能。WebStorm 为 React 和 JSX 提供高级支持,并提供 React Native 应用程序的核心编码协助。

    10. TextMate 编辑器

    • 官网:https://macromates.com/
    • 文档:
    • License:收费(单个用户 License 为48.75欧元)
    • 支持平台:Mac
    • 特性:
      • CSS 选择器可确定操作和设置的范围
      • 快速概述和导航功能弹出
      • 可以把你最喜欢的脚本语言作为插件集成
      • 从文档中运行 Shell 命令
      • 代码高亮
      • 可与 Xcode 协作并构建 Xcode 项目

    TextMate 并不是 IDE,但是通过使用其强大的片段、宏和独特的范围界定系统,它通常可以提供即使是编程语言特定的 IDE 都缺乏的功能。React 不直接支持,但是借助下面的插件可以很容易地获得对大多数 React 代码所基于的 JSX 的支持。

    插件

    总结

    所有代码编辑器都具有丰富而强大的功能。且其中的插件和扩展都可以适应 React Native 环境,因此在迁移到 React-Native 时,我们不必迁移到不同的代码编辑器。

    原文:Top 10 Editors For React Native Mobile App Development
    作者:Murtaza Basrai
    翻译:安翔

    展开全文
  • 以更新项目react-native0.56.0更新为react-native0.55.4版本为例 1 通过指令 进入项目目录,依次输入下列指令: react-native run-android //卸载react-native npm uninstall react-native //安装0.55.4版本的...

    以更新项目react-native0.56.0更新为react-native0.55.4版本为例

    1 通过指令

    进入项目目录,依次输入下列指令:

    react-native run-android
    //卸载react-native
    npm uninstall react-native
    //安装0.55.4版本的react-native
    npm install --save react-native@0.55.4
    react-native run-android
    npm install --save babel-core@latest babel-loader@latest
    npm uninstall --save babel-preset-react-native
    npm install --save babel-preset-react-native@4.0.0
    react-native run-android

    2 通过修改package.json

    打开项目目录中的package.json文件,

    1 dependencies修改为:

     "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-react-native": "^4.0.0",
        "react": "16.4.1",
        "react-native": "^0.55.4"
      },

    2 devDependencies修改:

    删除 "babel-preset-react-native": "5.0.2",

    3. 然后执行:npm install

    文件对比:

     

    展开全文
  • 如有疏漏错误,还望指正。...我们对其中的native的概念是很清晰的,它指的就是原生app,也就是原生开发方式开发出来的应用。那么react又是什么呢?他们之间的连字符又有什么特殊的意义么?下面我们来一

    如有疏漏错误,还望指正。转载不忘加上>>原链接<<哦~

    react-native是什么? react-native原理
    这里写图片描述
    从字面意思上来看,react-native由单词react和单词native组合而成,中间一个连字符连接。

    我们对其中的native的概念是很清晰的,它指的就是原生app,也就是用原生开发方式开发出来的应用。

    那么react又是什么呢?他们之间的连字符又有什么特殊的意义呢?下面我们来一一解答。

    首先我们来说说react。react是什么?

    官网上定义React是一个用于构建用户界面的js库。 React是声明式的,高效率的,并兼具灵活性(React is a declarative, efficient, and flexible JavaScript library for building user interfaces.)。

    我们来理解一下,用于构建用户界面的js库有很多啊,比如说angular,vue,jquery,ext等等,都可以被称为用户构建用户界面的js库。

    那么react和它们比又有什么不同呢?定义里说react是声明式的,高效率的,并兼具灵活性,这就是react的不同之处了,也可以称为react的几个特性吧。

    接下来我们就来分别介绍一下react的这几个特性。

    1.声明式声明式是由JSX语法来表现的。那么jsx语法又是啥?JSX是使XML可以嵌入JavaScript的语法。用以更加直观的描述UI。 JSX是JavaScript对象,可理解为createElement的语法糖。

    我们来对比一下,首先是原生的js语法:

    React.createElement(MyButton,{
        color:'blue',
        shadowSize:2
    },'Click Me');

    再来看一下jsx语法:

    <MyButton color="blue" shadowSize={2}>Click Me</MyButton>

    大家一看,这不就是一个语义化的标签么,这样写的确比上面写起来简单,看起来也更清晰,但这就是JSX了么?当然不是,JSX语法的重点在于它是与js代码混写的,配合es6就像下面这样:

    class ShoppingList extends React.Component {
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    }

    现在是不是感觉有点cool了?JSX语法使用语义化的标签来简化代码的编写,提升了代码可维护性的同时也降低了学习成本

    现在主流的IDE和文本编辑器都可以通过安装插件来支持JSX语法。

    所以这个声明式指的是什么呢?指的就是上面代码中用大括号括起来的部分{this.props.name}这里类似于angular中的数据绑定。声明了UI中的表现与js中数据的关系。

    2.高效率高效率是由虚拟DOM来实现的

    虚拟DOM技术指的是使用javascript Object模拟DOM树,计算变更,减少重绘,提升效率的一种技术实现。

    这里有一篇文章,写的非常不错,我就直接给大家引用过来,大家自己看吧。
    >>虚拟DOM技术分析<<

    3.灵活性:这个灵活性范围就广了,有安装的灵活性,编写代码的灵活性等。我侧重来说一个,就是components,组件化。

    react-native通过Components进行组件化。它把UI分割成独立的、可重用的部件 。组件化这个概念大家也都不是第一次听说了吧,如果比较陌生的同学,可以自己搜搜哈。

    react有它自己的组件化方式,就是所有模块都继承自React.Components,这比angular的modules更轻量级,结构也更简单,条条框框也减少了很多,是所谓真正的感受到了灵活性呢。

    代码示例就像上面讲JSX语法的时候引用的那段,大家体会一下。

    好的,我们了解完了react的三个特性,也对react有了初步的理解。那么回到我们最开始的问题:react-native是什么啊?

    字面上来说,我们已经了解了react,了解了native的含义,那么react和native又是如何联系起来的呢

    首先,React通过虚拟DOM实现了对UI层的解耦(无论是android还是ios)。

    然后,将浏览器的DOM树替换为Native的UI模块,使React在移动端进行渲染。

    最后,采用Native的核心API完成react与native的通信。
    这里写图片描述

    由于采用native原生UI作为展现层,所以react-native具有可以媲美原生应用的优秀用户体验与性能优势。

    我们对react-native的一些字面上的概念都有了一定的了解。我把以上内容简单的概括为:react-native是基于react技术编写native应用的一门技术,它继承了react简明、高效、灵活的特点,又兼具native优秀的用户体验。

    react-native技术采用js编码,编写的应用具有跨平台、可热更新的优势。这就是我眼中的react-native。

    展开全文
  • react-native与svg整合 ----- react-native-svg

    千次阅读 2018-01-09 14:04:35
    React-Native 与Iconfont整合 1、从阿里妈妈上选择自己所需要的素材,下载源代码 http://www.iconfont.cn/ 下载后得到的iconfont.ttf iconfont.svg.js即为所需文件 两种解决方案: react-native-vector-...
    React-Native 与Iconfont整合

    1、从阿里妈妈上选择自己所需要的素材,下载源代码
    http://www.iconfont.cn/
    下载后得到的iconfont.ttf iconfont.svg.js即为所需文件

    两种解决方案: react-native-vector-icons && react-native-svg

    采用 react-native-svg解决方案:
    (1)下载依赖包 react-native-svg
    yarn add react-native-svg
    执行link操作
    react-native link react-native-svg
    (2)在android/settings.gradle文件追加如下几行:
    include ':react-native-svg'
    project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
    (3)在android/app/build.gradle中插入依赖模块
    compile project(':react-native-svg')
    (4)在 android/app/src/main/java/[...]/MainApplication.java中插入如下操作
    添加 import com.horcrux.svg.SvgPackage;
    在getPackages()方法的返回值中添加 new SvgPackage()

    注意> 编译react-native-svg出现的问题
    error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.
    error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.
    error: failed linking references.
    是因为svg编译打包使用的是高版本的原因,需要修改自己项目app:build.gradle做对应的升级处理

    下载图标方式
    (1)从阿里妈妈上下载自己需要的各种图标,iconfont.svg即为所需
    (2)自己编写脚本,生成指定格式的图标文件iconfont.svg.js
    (脚本暂时没有进行开发,基本确定采用python/shell/perl脚本进行开发)
    (3)自己手动的添加图标的填充颜色(颜色是统一定制化开发的,在其中填充fill)
    (4)自己封装IconSvg组件
    import React, { Component } from 'react'
    import Svg, { Path } from 'react-native-svg'
    import Icons from '[...]/iconfont.svg.js'

    const ICON_SIZE = { xxs: 15, xs: 18, sm: 21, md: 22, lg: 36 }

    export default SvgIcon extends Component {
    render() {
    const { type, fill, width, height, size, style } = this.props
    return (
    <Svg
    width={width || ICON_SIZE[size] || 22}
    height={height || ICON_SIZE[size] || 22}
    viewBox={Icons.viewBox[type] || '0 0 1024 1024'}
    style={{
    ...style,
    }}
    >
    {
    Icons[type] && Icons[type].map((path, index) => {
    let default_fill = path.fill
    default_fill = fill ? fill : default_fill
    return <Path key={index} d={path.d} fill={default_fill} />
    })
    }
    </Svg>
    )
    }

    }

    (5)使用
    <SvgIcon type='ac_unit' size='40' width='22' height='22' fill='#ccc' />
    展开全文
  • React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)最近项目中用到推送功能,且项目是以React-Native框架实现iOS、Android跨平台开发,自然而然就选择了极光实现推送功能,由于以前是iOS开发...
  • 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定...
  • RN使用react-native-image-picker + aliyun-oss-react-native 上传图片 今天记录一下在RN使用react-native-image-picker以及aliyun-oss-react-native完成上传图片 如果是原生和RN混合开发,首先执行以下代码: yarn...
  • 作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发其实我对react-native这新玩意懂得不多,只知道它很强大,可以实现跨平台运行啦~所以得抓紧时间布置开发环境来学习...
  • 这两个问题主要是由于reactnative和vue,react等框架不一样,这个是跨平台的,写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看,所以关于调试就显得...
  • 在网上查找相关组件,开始使用的是react-native-qrcode组件,截图功能使用的是react-native-view-shot组件,保存图片则是使用react-native自带的CameraRoll模块。以为这样就可以万事大吉了,没想到还是出了不明...
  • react-native开发

    2018-07-10 15:15:12
    1、为什么用react-native 1、针对安卓和ios平台的开发成本高,平台的差异性无法做到代码复用, 产品和技术的沟通成本,无法动态更新, 每次版本迭代都需要上传到app store,会出现审核的不确定性。 2、react-...
  • 其实对react-native已经仰慕许久,但是由于工作太忙,加上自己的懒惰,迟迟没有着手学习,但是随着react-native日渐成熟,跨平台技术优势的...(1)react-native中文网地址:http://reactnative.cn (2)react-nati
  • 1、react-native-cli 无法使用exp服务 react-native init program-name #初始化项目 npm start(react-native start) #在项目目录下启动 js service react-native run-android #已连接真机或开启模拟器前提下,...
  • 现在,用react-native开发,当然,第一反应还是去github找第三方成熟的组件。奇怪,也找到了!这就是下面我要写的react-native-drawer的应用。既然是别人写的,我们只需要弄懂怎么就可以了,下面就来讲一下怎么...
  • react-native-amap3d 是 react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS 参考github:https://github.com/qiuxiang/react-native-amap3d 功能 该组件提供的功能可以满足一般的react-native开发...
  • 使用VSCode开发React-Native的正确姿势

    万次阅读 2016-10-26 17:35:31
    使用VSCode开发React-Native的正确姿势 前言 使用VSCode开发React-Native是个不错的选择,因为这个编辑器十分简洁、流畅,并且微软官方提供了React Native Tools插件,支持代码高亮、debug以及代码提示...
  • 以下是报错,不过他已经给了解决办法,报错提示的大概中文译为...run react-native start=。=。。,唔是启动RN服务吗?于是我跑到项目根目录下运行 react-native start, ok,看样子启动了服务,随后我重新运行项目...
  • react-native link的一些采坑经历

    千次阅读 2018-06-13 15:29:48
    最近做气象防雷app项目的时候,选用... 初次使用react-native开发APP还是有一些困难,这个组件是需要链接原生库的。就是说要使用react-native link这个命令。但是链接了原生库之后,再要下载其他的第三方组件就报...
  • 为了上传文件,搜索了很多资料终于找到选择本地文件并获取到具体路径的组件,可以在github上查找到该组件 ...2、react-native link react-native-file-selector 3、/app/build.gradle: 增加&lt;...
  • react-native 第三方库

    2020-06-21 15:01:25
    React-Native-Elements 一组开发RN的UI工具包(强烈推荐) ???????????????????? react-native-calendars ???????????????? 优秀的日历控件 apsl-react-native-button 定义了一个Button支持Style来配置 ???????? ...
1 2 3 4 5 ... 20
收藏数 34,665
精华内容 13,866
关键字:

用什么开发react-native