react-native 初体验 - 使用 javascript 来写 iOS app

DandJ 发布于2019-06-25 15:22 / 287人阅读

摘要：去年年初写了一个扩展十阅后，一直想写个十阅出来，奈何懒癌后期，一直拖到最近才完成原型。这次心血来潮闲的蛋疼，想起去年年初就有所耳闻的，于是就打算用它来耍耍。使用链接库在设备上运行用来断点调试地址学习资源图图图

去年年初写了一个 chrome 扩展「十阅」后，一直想写个十阅 app 出来，奈何懒癌后期，一直拖到最近才完成原型。

其实很早之前就已经写过一个 hybrid app 了，使用了 Ionic 框架，这是一款使用前端 web 技术来构建 app 的框架。使用了流行的 Angular，使用 Cordova 来使用 native 的功能，最赞的是它有一套优美的设计模板，类似于 bootstrap，通过它你可以轻松实现优雅漂亮的设计。

如果你熟悉 Angular 和 Cordova，基本上非常容易上手。我花了 3 天完成了 app（1天解决 HTML DOM 解析问题，1天解决调用系统浏览器打开链接问题）。

这次心血来潮（闲的蛋疼），想起去年年初就有所耳闻的 react-native，于是就打算用它来耍耍。

准备开发环境

OS X，开发 iOS 必须使用 OS X 系统

装好最新版本的 Node.js

安装 watchman （推荐使用 Homebrew 来安装watchman）

安装 Xcode 最新版

快速开始

$ npm install -g react-native-cli
$ react-native init AwesomeProject

运行iOS应用

$ cd AwesomeProject

$ react-native run-ios 或者用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。

使用你喜欢的文本编辑器打开 index.ios.js 并随便改上几行。

在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改！

基本上到这一步，你都可以看到你的第一个 react-native 应用运行起来了。

前方高能

开发流程我就不赘述了，有详细的文档可以看，但是有几个开发过程中的困扰我还是要说一下。

Navigator，这个东西对新手来说稍微有点复杂，文档也看不大明白，我是看了新手理解Navigator的教程

jsdom-jscore，这个是用来解析 DOM 的，但是作者好像不维护了，就烂尾了，还好有个哥们 fork 了一份并做了一些修复，在他的基础上，我终于装好了这个插件。

使用链接库

在设备上运行

用 Chrome 来断点调试地址 http://localhost:8081/debugger-ui

学习资源

51 ReactNative Examples

https://facebook.github.io/react-native/

https://github.com/soliury/noder-react-native

图图图

idc机房托管专线服务初体验来写使用cdn加速的直观体验 react-native

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/16280.html

react-native 初体验 - 使用 javascript 来写 iOS app

摘要：去年年初写了一个扩展十阅后，一直想写个十阅出来，奈何懒癌后期，一直拖到最近才完成原型。这次心血来潮闲的蛋疼，想起去年年初就有所耳闻的，于是就打算用它来耍耍。使用链接库在设备上运行用来断点调试地址学习资源图图图去年年初写了一个 chrome 扩展「十阅」后，一直想写个十阅 app 出来，奈何懒癌后期，一直拖到最近才完成原型。其实很早之前就已经写过一个 hybrid app 了，使用了...

余学文 2019-08-19 18:22 评论0 收藏0
翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么？

摘要：跟非常相似，但是在开始尝试你第一个之前，也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。华翔，Web前端开发工程师著作权归作者所有，转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了，自从适配了An...

darkerXi 2019-08-21 12:05 评论0 收藏0
react native学习笔记（二）

摘要：但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言开发中还很少使用。这叫做是一种在中嵌入结构的语法。模块则是用来告知哪一个组件被注册为整个应用的根容器。编写Hello World React Native看起来很像React，只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构，首先需要了解一些基本的React的概念，比如JSX语法、组件、...

OnlyLing 2019-06-25 16:42 评论0 收藏0
node.js初体验之利用node.js的fs-文件系统，来写一个批量修改文件名的小工具

摘要：导语公司最近业务不忙，利用闲暇时间准备学习一下，看见网上前端大牛张旭鑫的文章一般般的网页重构可以使用做些什么，跟着写了一下批量修改文件名的小工具，主要利用的中相关方法来实现记录一下，以备后用。导语：公司最近业务不忙，利用闲暇时间准备学习一下Node.js，看见网上前端大牛张旭鑫的文章JS一般般的网页重构可以使用Node.js做些什么？，跟着写了一下批量修改文件名的javascript...

Steve_Wang_ 2019-08-23 15:30 评论0 收藏0
从 1 到完美，用 js 和 react-native 写一个 APP

摘要：从到完美，用和写一个在年开源了后，紧接着在年就又开源了，就此打开了用和前端技术写原生之路。对应来看，程序只有两个部分，和，而部分则分为组件和。所以，在端的纯库无在中同样适用，如等。应用实例便是使用开发的一个日记。从 1 到完美，用 js 和 react-native 写一个 APP facebook 在 2013 年开源了 react 后，紧接着在 2015 年就又开源了 react...

CollinPeng 2019-08-23 11:45 评论0 收藏0