【干货】用亲身经历讲解如何利用React Native混合开发 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了108810字，被71人关注，获得了136个喜欢
【干货】用亲身经历讲解如何利用React Native混合开发
一摘要刚哥上一篇文章,介绍了如何在MAC电脑上搭建React Native运行环境,环境搭建好了,接下来这篇给大家介绍一下如何创建自己的工程项目.
二 具体步骤第一步 创建HelloWord工程
第三步 运行工程1.目录结构
2.打开ios目录运行工程文件
这样就打开了工程了
<mand+R运行工程
第四步 代码编辑现在大家最关心的在哪里写代码,下面就给大家介绍在哪个位置进行代码的编写.现在我们以混编iOS为例,打开index.ios.js 我们在这个文件进行代码的编写.如果是混编安卓那么我们就在index.android.js 中进行代码书写.如图所示.1.编辑js文件
2.文件内容结构
3.修改内容
4.退出编辑保存
5.运行工程(Command+R)
结束今天就说到这里,接下来时间会给大家介绍React Native书写的具体语法.这里涉及到了JavaScript方面的知识.更多精彩内容请关注微博@蓝鸥教育 ，微信【蓝鸥】。THE END.文/刘玉刚（蓝鸥讲师）
发布/蓝鸥仔仔蓝鸥仔仔，一个每天拿着5毛钱工资到处嗨的人。长期寻找好的文，结交好的人，幻想着成为一个伯乐，把好的文给大家一起看，一起成长。很高兴认识你，喜欢请关注一个。这样，在找文的时候就更有动力了。PS：你有文，不介意的话给我投稿吧，最最喜欢好文了，期待你的投稿。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
分享 iOS 开发的知识，解决大家遇到的问题，讨论iOS开发的前沿，欢迎大家投稿~
· 29806人关注
开始吧 ReactNative
· 6人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：纯React Native开发的嘎嘎商城客户端，开源地址:
欢迎大家star,fork....
本开源项目由江清清的技术专栏整理(),转发请求注明来源
基于React Native 实现的嘎嘎商城客户端，暂时只是适配Android版本，暂时大部分布局页面正在开发中，业务逻辑功能以及iOS版本适配会后面进行。
当前的商城客户端后期会继续开发商品点单，订单，购物车，支付，商品列表以及详情，搜索功能，定位切换，国际化多语言切换，第三方账号登录以及分享等相关功能。也欢迎广大开发者多提建议。项目继续更新中。
刚创建的React Native交流八群:,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
git clone /jiangqqlmj/GaGaMall.git
cd GaGaMall
npm install
1.运行Android版本
Mac OS X:react-native run-android or Windows OS:react-native start and react-native run-android
2.运行iOS版本
Mac OS X:react-native run-ios or xcode open project and run project
暂时依赖组件
rn-viewpager
react-native-scrollable-tab-view
react-native-swiper
react-native-vector-icons
react-native-tab-navigator
leancloud-storage
react-native-storage
关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。
在线用户: 1今日访问: 1,341昨日访问: 3,514累计访问: 3,310,415据群众举报，经缜密侦查，共查获嫌疑人数百名。
女子在郑州高速上被踹下车，哭诉一年被打二十次。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　诚然，React Native 结合了 Web 应用和 Native 应用的优势，可以使用 Java 来开发 iOS 和 Android 原生应用。在 Java 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
　　React Native 使你能够使用基于 Java 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上――开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
　　其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。
　　下面，我们可以尝试用React Native创建一个 iOS APP.
　　在我们开始之前，我建议：你可以在 里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的 APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建 UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
　　首先，我们先来安装相应的工具。React native 是使用 来 创建 Java 代码。如果你已经在你电脑上安装上了这些工具，你可以跳过下面这几步。
　　推荐使用 的方式来安装 nvm，watchman 和 flow。
　　在Mac下，如果用homebrew，那么只用一行就可以装好:
　　brew install node
　　接下来安装
　　brew install watchman
　　watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
　　接下来安装 npm
　　npm install -g react-native-cli
　　nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。
　　在终端，找到你希望保存的项目文件，然后运行下面的文件夹。
　　react-native init BookSearch
　　以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode 的BookSearch.xcodeproj 并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址 Java 的应用程序。
　　? 终端被打开，服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX（我们将看看这个版本）和 Java 代码。
　　运行这个 APP,你可以看到下图中的模拟器，如果你想在开发运行有几个步骤，你应该这样做。
　　欢迎屏幕给出了一些关键的指令，你应该注意：编辑应用程序的用户界面，你应该修改，当你创建项目时生成的 index.ios.js 文件，如果您更改 Java 代码，重新加载命令应用程序 Command-R 看到的变化，如果你想要更多的选择，使用命令控制 Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场重新加载和浏览器的调试。
　　在任何时候做本教程时你可能会遇到一个红色屏幕模拟器，可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在 Xcode 中的应用并再次运行它。对于其他错误，是由于语法错误代码中或网络请求超时时（如果你的应用从互联网上获取数据），一个简单的重新加载后修复这个问题应该怎么做。
　　如果你在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它：Hardware & Keyboard & Connect Hardware Keyboard.
　　如果你按上边程序做了它依然不能重新加载，那么你可能需要重启你的电脑。我遇到过一次突然死机，重启电脑可以完成加载。
　　我们现在开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用 Xcode，但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的 Java IDE。我用过 RudbyMine，但实际上任何 IDE 都支持 Java。如果你能得到一个支持 JSX 的那真很不错。
　　当你打开 indx.ios.js 文件，你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。
　　'use strict'
　　以上代码启用了严格的模式，增加了处理原生 Java 代码对错误的改善。
　　var React = require('react-native');
　　以上代码可以加载 react-native 模块，并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
　　var { AppRegistry, StyleSheet, Text, View, } = R
　　上面是一个解构赋值，你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的，但如果你不用它，那么每次你使用一个组件在你代码中时，你就必须使用完全限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」 、「React.StyleSheet」 而不能用「StyleSheet」 等等。
　　var BookSearch = React.createClass({ render: function() { return ( &View style={styles.container}& &Text style={styles.welcome}& Welcome to React Native! &/Text& &Text style={styles.instructions}& To get started, edit index.ios.js &/Text& &Text style={styles.instructions}& Press Cmd+R to reload,{'\n'} Cmd+Control+Z for dev menu &/Text& &/View& ); } });
　　上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用 JSX（Java语法扩展）来构建应用程序的 UI。如果您以前使用过 XML（甚至HTML），JSX 就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应，你可以使用纯 Java，但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码，通过大型的 JSX 树结构将更容易阅读理解。
　　var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
　　上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他UI组件。
　　上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用 CSS 样式应用程序的 UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如: style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。
　　（未完待续）
　　以真实用户体验为度量标准进行 ，监控网络请求及网络错误，提升用户留存。访问 感受更多应用性能优化体验，想阅读更多技术文章，请访问 OneAPM 。
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
为企业和开发者提供 APM 解决方案，塑造APM领军品牌。
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：