1,jdk
2,android studio 集成开发环境
3,配置adb环境变量
cd用户主目录 cd ~
然后如果目录下不存在.bash_profile文件,则创建该文件
$touch .bash_profile
打开该文件夹
$open .bash_profile
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_92.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH
ANDROID_HOME=Library/Android/sdk
export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$PATH
保存并退出,然后执行
$source .bash_profile
测试
$adb version
4,安装nodejs,https://nodejs.org/en/ 安装包自动安装nodejs和npm
检测 node --version npm --version查看版本号
5,安装react native
$ sudo npm install -g react-native-cli
-g意思是全局安装
$open /usr/local/lib/node_modules 可以看到npm在全局安装的所有包
6,初始化示例项目
$react-native init AwesomeProject 需等待一段时间
7,启动react-native服务,运行测试项目
cd AwesomeProject
$react-native run-android
第一次运行可能会安装gradle,速度有点慢,要耐心,等等等。。。 PS:测试推荐使用真机,安卓虚拟机启动速度不想吐槽。。。 真机调试时,如果一打开一片红,“Unable to download JS bundle”,请摇晃手机,在弹出的选单里选择Dev Settings,选Debug server host for device,然后输入电脑的IP地址,此时手机要与电脑(编译环境)在同一Wifi环境下
8,编辑代码
打开index.android.js并修改部分代码,保存 摇动手机,点Reload JS,可以看到界面变化了(增加静态资源时,需要重新编译)
相关推荐
windows环境下Android的ReactNative开发环境搭建
在windows搭建RN环境
最新版React Native环境搭建及项目生成运行步骤,让新接触的爱好者尽量少绕弯子。
为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单(也是最常见)的用例是读取NFC包含 的标签NDEF,可以通过以下代码实现: import React from 'react'; import {View, ...
This book will show you how to build your own native mobile applications for the iOS and Android platforms while leveraging the finesse and simplicity of JavaScript and React. Throughout the book you...
第1课1、手把手教React Native实战之环境搭建【Mac真机】同时调试开发Android&IOS; 第2课2、手把手教React Native实战之从React到RN 第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React ...
React Native 快速搭建商城项目基础结构帖子附件代码,下载此代码配合帖子流程,可以在搭建React Native 商城项目或者其他项目搭建的时候快速建成!
Android和ReactNative混合开发Demo,包含Android原生加载RN页面,Android原生调用RN函数,RN函数调用原生函数
基于react native0.37版本 listview下拉刷新上拉加载, 界面跳转并传值,react与android传值,js界面与android back键结合, android调用js, js调用android方法和原生UI
根据《React Native零基础入门到项目实战》视频写的项目,主要包括实战项目。根据《React Native零基础入门到项目实战》视频写的项目,主要包括实战项目。
mac端可视化调试react或者reactnative工具,可以调试redux应用状态
本篇文章主要介绍了React Native 环境搭建的教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在 React Native 中利用现有的 JavaScript 和 React 知识,就可以开发和部署功能完备的、真正原生的移动应 用,并同时支持 iOS 与 Android 平台。除了框架本身的概念讲解之外,本书还讨论了如何使用第三 方库,以及...
React Native Blur A component for UIVisualEffectView's blur and vibrancy effect on iOS, and 500px-android-blur on Android. Content Installation BlurView VibrancyView Example React Native app ...
Leverage the best of iOS and Android for React Native development while maximizing code reuse and cohesion Implement architecture patterns in your React Native application that support efficient data ...
react native实现Android的tabbar功能
安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在...
简单易用的 React Native 截屏、监听系统截屏事件组件(ios、android)
Android 项目中嵌入 ReactNative
3.1 搭建环境 13 3.2 创建一个新的应用 17 3.3 探索示例代码 24 3.4 开发天气应用 27 3.5 小结 40 第4章 移动应用组件 42 4.1 类比HTML 元素与原生组件 42 4.2 处理触摸和手势 46 4.3 使用结构化组件 58 ...