`
222xiaohuan
  • 浏览: 53194 次
  • 性别: Icon_minigender_2
  • 来自: 苏州
社区版块
存档分类
最新评论

mac android react native 环境搭建

 
阅读更多

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,可以看到界面变化了(增加静态资源时,需要重新编译)

 

 

分享到:
评论

相关推荐

    东方耀手把手教React Native实战开发

    第1课1、手把手教React Native实战之环境搭建【Mac真机】同时调试开发Android&IOS; 第2课2、手把手教React Native实战之从React到RN 第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React ...

    beginning mobile app development with react native

    React Native是一种流行的移动应用开发框架,它允许开发者使用JavaScript语言来编写原生iOS和Android应用。与传统的原生应用开发相比,React Native以其跨平台特性和高效的开发速度而受到开发者的青睐。以下是React ...

    react native source

    1. React Native的入门设置,包括在Mac、Linux(Ubuntu)和Windows上的环境搭建。对于不同操作系统,设置步骤可能会有所不同,因此开发者需要根据自己的操作系统进行相应的配置。 2. 通过“HelloWorld”应用的创建,...

    react native入门

    **一、React Native环境搭建** 1. **系统要求**: 开发React Native应用需要准备一个装有Node.js的开发环境。对于Windows用户,可能还需要安装Python 2.7和Visual Studio。对于Mac用户,推荐使用Homebrew来安装必要...

    6天带你玩转React Native跨平台研发

    - 安装React Native所需的依赖,包括Mac+iOS+Android开发环境。 - 配置Atom或Nuclide编辑器。 - WebStorm配置。 - **React Native中的样式使用**: - 介绍CSS的基础概念。 - 比较Web端CSS与React Native CSS的...

    react-native-course:with使用React Native构建本机Android和iOS应用

    2. **React Native环境搭建**:设置开发环境是开始学习React Native的第一步,包括安装Node.js、npm、Watchman、Homebrew(仅限Mac)、JDK、Android Studio(或Xcode)以及React Native命令行工具。 3. **React ...

    Mac本M1芯片无法使用Android模拟器的解决方案.docx

    "解决Mac本M1芯片无法使用Android模拟器的问题" 本文主要讲述了Mac本M1芯片无法使用Android...本文提供了一个详细的解决方案来解决Mac本M1芯片无法使用Android模拟器的问题,帮助开发人员更好地解决问题和搭建环境。

    RN环境搭建及调试方法1

    本文将详细讲解如何搭建React Native的开发环境,并提供一些必要的调试方法,适用于Windows和Mac操作系统。 首先,我们来看一下环境搭建的步骤: **Windows系统**: 1. **安装Node.js**: 访问官方网站 ...

    安卓java读取网页源码-react-native-example-toilet:react-native-example-厕所

    react-native run-ios(run-android) 服务端:具体看下面说明 1、express开发 1.1 npm环境设置 安装node软件: 安装淘宝滤镜:npm install -g cnpm --registry = 设置全局的npm从国内下载资源, npmrc添加配置。mac...

    安卓java读取网页源码-react-native-full-example-chunlei:react-native-full-exampl

    react-native run-ios(run-android) 服务端:具体看下面说明 1、express开发 1.1 npm环境设置 安装node软件: 安装淘宝滤镜:npm install -g cnpm --registry = 设置全局的npm从国内下载资源, npmrc添加配置。mac...

    一份走心的JS-Native交互电子书

    - **Node.js环境搭建**:介绍了如何在MAC上安装和配置Node.js环境。 - **VSCode集成开发环境**:指导读者如何利用VSCode进行高效开发。 #### 3.2 HTML与JavaScript结合 - **基本结构**:通过一个简单的示例展示了...

    Weex开发之路(一):开发环境搭建 - 简书1

    与Facebook的React Native相比,Weex具有更轻量级、更低的接入成本以及更易于上手的特性。Weex的核心理念是“write once, run everywhere”,通过底层框架统一不同平台的调用差异,实现代码的复用。 **一、Weex开发...

    多语言IM即时通讯源码 支持7端互通通讯源码带搭建教程

    “支持7端互通通讯”意味着该源码可以应用于多个不同的终端设备,包括但不限于iOS、Android、Web、Windows、Mac、Linux以及各种小程序等,确保用户在不同平台之间能无缝切换并保持通讯的连贯性。这种跨平台兼容性...

    WEEX环境搭建与入门详解

    WEEX和ReactNative同属流行的跨平台移动开发框架。 WEEX官方资源: WEEX的官方地址是***,在这个网站上可以获取到WEEX的文档、SDK以及其他资源。 快速上手: WEEX最简单的入门方法是使用Playground App和在dotWe...

    old-driver-collection:学习资源特色仓库(收集知识,共享本质)汇集了各种学习资料,工具,组件,开源App,下载资源和相关新闻,但这并不完美

    "react-native" 是Facebook开发的框架,用于构建原生移动应用,支持iOS和Android,这也是"react-native-android" 和 "react-native-ios" 标签的来源。最后,"es6" 是ECMAScript 2015的别名,它是JavaScript语言的一...

    【新斗罗大陆】Linux手工端+安卓苹果双端+运营后台+授权多功能后台

    这通常涉及到对服务器环境的搭建,包括安装必要的库、服务和框架。开发者需要熟悉Linux命令行操作,以及可能用到的脚本语言如bash、python等。手工端的优势在于可以灵活调整和优化服务器配置,以适应不同规模的游戏...

    Flutter完整开发实战详解1

    作者具有丰富的跨平台开发经验,包括Flutter、React Native和Weex,认为Flutter在跨平台兼容性方面表现最佳。在Android平台上进行开发并首次在iOS上运行时,Flutter的热重载(HotLoad)功能以及出色的UI兼容性令人印象...

    安卓java读取网页源码-toiletApp:厕所应用程序

    react-native run-ios(run-android) 服务端:具体看下面说明 1、express开发 1.1 npm环境设置 安装node软件: 安装淘宝滤镜:npm install -g cnpm --registry = 设置全局的npm从国内下载资源, npmrc添加配置。mac...

Global site tag (gtag.js) - Google Analytics