配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Preferences/AndroidStudio* rm ~/Library/Preferences/com.google.android.studio.plist rm -Rf ~/Library/Application\ Support/A…

在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环境>,在开发者头条的抓取内容可以看到一部分,由于一直在休假就没有仔细学习,今天再次回顾我的收藏时却发现链接打不开(其实当时也有发现,只是这么说一下罢了).于是,你应该知道怎么做的,最好的工具莫过于搜索而不是一味的抱怨说只能在mac上玩.之前因为react native ios肯定是只能在mac上玩,An…

初步结论:如果想把 React Native 集成到现有的原生项目中,不能使用taro的React Native 端开发功能(目前来说不能实现,以后再观察).   RN开发有2种模式: 1.一是原生Android/IOS混合起来的开发(这种开发目前在国内,从事的比较多)  react-native init projectName   2.CRNA(create react native app)模式开发(通常结合Expo).   环境配置比较: 第一种方法要求的开发环境比较繁杂,需要 node…

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xd…

Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点,接着,选择菜单Debug -> Debug ‘app’,即可调试Android应用,效果如图5.12所示. 图5.12  Android原生项目断点调试 如果要调试原生项目的实现和逻辑,可以使用上述方法:如果要调试Android的布局可以使用React Native的调试选项:Toggle Ins…

打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. 图5.8  Android原生项目结构 从Android的项目结构,想必读者可以隐约感受到:Android适配是基于文件夹的,不同分辨率和尺寸的屏幕会自动适配相应的文件夹下的布局或资源文件.但是,想要进一步理解Android的适配,有必要先了解Android适配的一些基本概念: 屏幕尺寸:屏幕尺寸…

React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件中指定的,而且一经指定,在被指定的组件的生命周期中则不再改变. state通常是用于存储需要改变的数据,并且当state数据发生更新时,React Native会刷新界面. 了解了props与state的区别之后,读者应该知道,要将首页的数据传递到下一个页面,需要使用props.所以,修改home.…

在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项. (1)晃动设备或使用模拟器上的快捷键(iOS模拟器快捷键command + d,Android模拟器快捷键command + m)打开调试选项,效果如图2.15所示. 图2.15  React Native调试选项 (2)单击Debug JS Remotely选项.此时,React Native…

JSX并不是一门新的开发语言,而是Facebook提出的语法方案:一种可以在JavaScript代码中直接书写HTML标签的语法糖,所以,JSX本质上还是JavaScript语言. 小知识:语法糖(Syntactic sugar)是由英国计算科学家彼得·兰丁(https://zh.wikipedia.org/ wiki/%E5%BD%BC%E5%BE%97%C2%B7%E5%85%B0%E4%B8%81)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序…

React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个APP,所以用的Mac. 这里就讲一讲我在搭建开发环境过程中遇到的坑,也为后面学习该技术的道友指一条坑少的路. 本文讲解的是,在Mac OS上,搭建IOS开发环境的步骤. Android篇,请移步:React Native 搭建开发环境(2)(Mac OS - Android项目篇) 1.安装Hom…

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 随着 React 的盛行,其移动开发框架 React Native 也收到了广大开发者的青睐,以下简称 RN.通过 RN 我们能够使用 JavaScript 语言来实现跨平台移动应用的开发,打开了前端工程师通往移动平台的大门.用 RN 官方的介绍来概括它的特点就是:Learn once, write anywhere. 如果你了解 React,那么学习 RN 的话应该会非常轻松.因为 RN 和 R…

React Native是使用JavaScript和React编写原生移动应用 我的开发平台是基于windows系统,所以只支持android,要是想开发ios系统,那就只能考虑使用沙盒环境 接下来就是必须安装它的依赖 注意 :Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本) https://reactnative.cn/docs/getting-started/ 官方文档其实写的就很详细了…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍配套视频教程「80 节实战课精通 React Native 开发」:此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而视频…

转-http://www.cnblogs.com/wangshuo1/p/react_native_02.html Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮的用户界面和非凡的功能,Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等. 1.下载安装Sub…

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的) react-native的GitHub地址:https://github.com/facebook/react-native react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html 1.…

Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮的用户界面和非凡的功能,Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等. 1.下载安装Sublime 3 Sublime 3的下载地址: http://www.sublimetext.com/3 选着相应的平…

http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变量. 安装Android SDK 可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装.推荐使用Android Studio,以下说明会默认以Android Studio的方式说明.请注意选择x86还是x64版本. 为了加速下载,推荐从Andr…

React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 目的: 由于我想在一台电脑上同时开发IOS和Android两个APP,所以用的Mac. 这里就讲一讲我在搭建开发环境过程中遇到的坑,也为后面学习该技术的道友指一条坑少的路. 1.安装Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. 打开 mac os里的 终端,直接复制粘贴以下命令,回车: /usr/…

前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用.如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客. 阅读本文之前,我们假设你已经有过使用React创建网站的经验.如果你还是一个React新手,那么我们建议你从React的网站开始学习. 设置 使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm以及watchman,你也可以有选择的使…

近些年,Web前端甚是火爆,火爆程度堪比我毕业时的移动端开发一般.随着JavaScript的火爆,移动端也不安分了起来,ReactNative就异军突起了,几乎要做到"一次学习,四处开发"了,而我更是要拥抱时代的变化,开始自己的ReactNative的学习了. 那首先我们就是要开始配置环境: 需要安装的工具有: 1. Android Studio 2. SDK 3. JDK 4. node.js 5. react native 6. atom编辑器及其Facebook提供的插件Nucl…

配置主要分为以下几步: 安装node.js 安装AndroidStudio 安装React Native命令行工具 搭建React Native版本的Hello World,修改代码查看效果 第一步 下载node.js,安装并配置环境变量.下载地址:https://nodejs.org/en/download/. 检验是否配置成功,命令行输入:node -v 成功则会显示nodejs版本,否则配置有问题. 第二步 安装AndroidStudio.下载地址:https://developer.an…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

1.下载安装Sublime 3 Sublime 3的下载地址:http://www.sublimetext.com/3 选相应的平台进行下载,安装. 2.安装Package Control 默认的Sublime 3中没有Package Control,要进行安装之后才能用这个去安装其他的插件. 简单的安装方法 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: import urllib.request,os,hashlib; h = '2915d1…

1.先安装node.js,https://nodejs.org/en/download/ 然后,双击下载好的.msi文件安装即可,安装完成后,打开终端,输出npm -v 即可查看我们刚才安装的node.js的版本: 2.安装React Native命令行工具 node.js安装成功之后,接下来我们就可以通过 npm intall 来安装React Native命令行工具了.打开终端,输入并执行下面命令即可完成安装: npm install -g react-native-cli 如图: Reac…

在前面的案例中,界面的搭建都是采用CSS的布局,基于盒子模型,依赖 display属性 , position属性, float属性.但对于那些特殊布局非常不方便,比如,垂直居中. 一种全新的针对web和移动开发布局应运而生:Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. 一.FlexBox布局 1.1 FlexBox是什么意思呢? flexible(形容词):能够伸缩或者很容易变化,以适应外界条件的变化 box…

本文转载自:http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a9197c8dbc4700c40bb907e56c&scene=1&srcid=0808BT91kp5iX5xNRV0WuWrQ#rd 一.环境需求 1.1 安装Homebrew Homebrew是OS X的套件(包)管理器,我们可以通过它获取并且安装很多组件 安装方式: ruby -e "…

1. 首先创建一个目录(比如ReactNativeDir),用于存放各个ReactNative工程的代码 2.使用React Native命令工具来创建(初始化)一个ReactNative项目(test): react-native init test 使用Atom打开test项目,可以看到有 如下几个重要目录/文件: 目录/文件 说明 __test__  单元测试文件夹 android  原生Android工程文件夹 ios  原生IOS工程文件夹 node_modules  依赖的第三方库目…

欢迎各位同学加入: React-Native群:397885169 大前端群:544587175 大神超多,热情无私帮助解决各种问题. 我想我写的这篇博文可以帮助到很多人,接下来要分享的东西,对app而言很重要,很常见,我先上图,大家看效果! 为什么我们要这么做呢?这体现出对用户的友好,当用户第一次使用我们的app的时候,欢迎页能体现出我们app的文化,那么启动页的作用呢?这个就更加重要了,由于我们的app要加载许多数据,启动页有一个延迟过程,这个过程给足了app时间去加载数据,用到启动页的ap…

因为是window电脑上运行的,所以测试的是安卓 1: 安装jdk:jdk-8u45-windows-x64.exe 2: 配置JAVA的环境变量 在安卓的配置基础上添加一个变量ANDROID_HOME,见图 ANDROID_HOME = D:\Android\sdk path 增加 ;%ANDROID_HOME%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools; 由于我电脑上本来就拥有安卓环境,所以配置很容易 3:安卓nodejs开发环境…

ReactNative分为服务器端和手机端loader程序,Android版有3种代码:js代码,java代码和c++代码,主要是编写的是js代码,如果框架功能不足就需要编写原生的java代码来扩展,c++代码主要和js引擎有关,一般很少用到. 首先安装node.js服务器端,到node.js的网站上下载node.js然后安装上就可以了.https://nodejs.org/en/ 安装git,在执行命令的时候,需要通过git到github上去下载相关的文件. 下载地址如下:http://rj.…