reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

关键词：

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学习前端（React为主）以及Android端知识了！另外，文章的内容都是在Windows环境下进行的！

ReactNative是个什么东西？这里我就不做详细讲解了，直接去官网查看即可！https://www.reactnative.cn/简单来讲，就是一种跨平台开发技术，可以使用前端语言React去开发原生安卓和ios应用，目前除了RN外，类似的技术还有uni-app（nvue）和Flutter！

环境搭建

参考官网：https://www.reactnative.cn/docs/environment-setup

1.去Nodejs官网下载nodejs并安装，选择LTS版本即可！

2.去oracle官网下载安装JDK，并配置环境变量！这里我们选取java11版本，原因是如果你使用最新版的AndroidStudio并且Gradle构建工具的版本在7.0以上时强制要求jdk版本最低为11，如果你安装1.8版本的话就只能使用低版本的AS以及低版本的Gradle，而且很可能会在你后面的编译打包过程中出现不必要的错误！
另外你在安装完AndroidSDK后，会自带JavaJDK环境：

安装在PC上的JDK和Android自带的JDK有什么区别？

主要区别就是你所使用的编译方式：

• 如果你通过AndroidStudio开发工具编译，比如运行应用到手机或Build APK时会使用AndroidSDK自带的JDK环境（如上图，当然你也可以修改为PC上的JDK环境，AndroidSDK自带就是为了防止你的pc上没有安装）。
• 如果你是在cmd或powershell命令行下，使用gradlew命令进行编译时，这是就会使用到PC上安装的JDK环境了。

3.安装AndroidStudio！

4.安装VSCode！其实我比较喜欢WebStrom，集成环境比较强大，开发体验也很好，因为用惯了AndroidStudio，IDEA！奈何收费，所以使用轻量级的前端比较流行的编辑器VSCode，也是相当不错的！

5.可以根据rn官网建议，使用npm切换源，这样在安装第三方的一些库时，速度会很快！

如果你选择安装了yarn，那就可以用yarn代替npm命令了！

创建项目

使用命令行创建RN项目：

npx react-native init HelloWord

项目创建成功！

需要注意的是，你在百度一些rn的开发教程时，文章里时长会告诉你直接用命令 ：

react-native xxx

如：

react-native run-android

此时就会报错，因为这是老版本的用法，新版本需要使用npx命令：

npx react-native init HelloWord

npx react-native run-android

npx yarn android

使用VSCode打开刚创建的HelloWord项目：

index.js即为程序入口，App.js可以理解为UI的入口，我们可以在APP.js中修改UI首页及路由配置等等！

准备运行程序到手机：

1.选择VSCode顶部工具栏终端选项：

2.输入命令：npx yarn android未安装yarn就使用npx react-native run-android：
运行完命令，首先会自动下载对应的gradle版本，然后会自动进行android项目的编译，需要一定的时间，耐心等待即可！
不出意外的话意外发生了，编译报错了，如下图：

意思就是没找到我的AndroidSDK路径，这是因为我的AndroidSDK并没有安装在默认路径，而是放在了D盘自定义路径！我们打开android\\local.properties文件，发现没有？那我们就创建一个，并添加如下代码：

sdk.dir=D\\:\\\\SDK\\\\Android\\\\Sdk

sdk.dir=你的androidSDK路径，再次执行npx yarn android：

启动服务成功会弹出（注意一定不要有其它资源占用8081端口号），你在rn中打印的log会在这里显示：

编译：

第一次编译时间会稍长，因为它要下载很多安卓环境需要的一些库文件！

注意点：首次安装app到手机需要你配置Bundle Location，具体方法为摇晃手机，弹出选择框，选择Change Bundle Location，填入你pc的ip地址如：http://192.168.1.xxx:8081

时间着实有点长啊啊啊啊…，将近15分钟，不过这是首次，后面再编译就快了！

手机APP界面：

说好的HelloWord呢？别急，打开App.js，修改代码：

import React from 'react';
import type  Node  from 'react';
import 
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
 from 'react-native';

const App: () => Node = () => 
  return (
    <SafeAreaView>
      <StatusBar barStyle='dark-content' backgroundColor='#fff' />
      <View style=styles.container>
        <Text style= color: '#000', fontSize: 30, fontWeight: 'bold' >HelloWord</Text>
      </View>
    </SafeAreaView>
  );
;

const styles = StyleSheet.create(
  container: 
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
    height:'100%',
    width: '100%'
  
);

export default App;

按Ctrl+S保存，app会自动刷新UI：

reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学... 查看详情

reactnative入门——环境搭建及第一个rn项目—helloworld(代码片段)

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学... 查看详情

rn01-reactnative环境搭建

学习文档：中文：http://reactnative.cn/docs/0.31/getting-started.html英文：http://facebook.github.io/react-native/docs/getting-started.html 第一步：Homebrew安装Homebrew简称brew，是MacOSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，可 查看详情

windows下python环境搭建及第一个helloworld

...的搭建过程，闲着无事记录一下，以备后用，也可以给新入门的做个参考。主要包括Python开发环境下载、安装、测试；IDE（我这里选择的是pycharm）下载、安装、配置，以及第一个helloworld的运行，具体如下：1：访问Python官网，地... 查看详情

reactnative环境搭建扩展篇——安装后报错解决方案

之前一篇写了《逻辑性最强的ReactNative环境搭建与调试》说了RN的安装，今天在这里做一个复盘，让我们能够更直观更深入的了解ReactNative（以下简称RN）,这一篇重点来说的就是，安装之后必报的2个错误的解决方案。更新日期：20... 查看详情

reactnative入门环境搭建与helloworld

前言目前关于ReactNative的教程很多，官方文档写的也不错，但是感觉大部分教程写的不是很清楚，导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于ReactNative0.43，只适用于用Windows平台的Android开发者。1.配置ReactNative首... 查看详情

reactnative入门-环境搭建,创建第一个helloworld(代码片段)

CreateReactNativeApp 是开始构建新的ReactNative应用程序的最简单方法。它允许您启动项目而无需安装或配置任何工具来构建本机代码-无需安装Xcode或AndroidStudio。先安装Node.Js，则可以使用npm来安装create-react-native-app命令行实用程序... 查看详情

reactnative入门基础知识总结(代码片段)

中秋在家闲得无事，想着做点啥，后来想想，为啥不学学reactnative。在学习 ReactNative时，需要对前端（HTML，CSS，JavaScript）知识有所了解。对于JS，可以看看阮一峰老师的《ECMAScript6入门》这篇文章。里面涉及很多ES6的新特性... 查看详情

逻辑性最强的reactnative环境搭建与调试

ReactNative（以下简称RN），已经“火”了好一段时间了，网上的资料相对也很丰富，只是一直迟迟没有发布1.0，不过出身豪门（Facebook）的RN和国内顶级互联网公司对于RN的实践与应用，就足矣证明其实力!本文分为以下几个... 查看详情

rn开发环境的搭建

准备工作在Windows平台上开发ReactNative需要安装以下环境和工具：Node.jsAndroidStudio1,安装Node.jsReactNative开发需要用到Node.js环境。我们做ReactNative开发会经常性的和Node.js进行打交道。安装Node.js有两种常见的方法：一种是通过Windows包... 查看详情

reactnative的环境搭建中常见问题

搭建完成android的环境，我们就可以继续我们的reactnative环境的搭建了。当然，按照fb的安装流程来完成rn的搭建。http://facebook.github.io/react-native/docs/getting-started.html1.installpython2一定要安装python2.X.X的版本，切记不要安装pythn3+以上的... 查看详情

在mac上搭建reactnative开发环境

概述前面我们介绍过在window环境下开发ReactNative项目，今天说说怎么在mac上搭建一个RN的开发环境。配置mac开发环境基本环境安装1.先安装Homebrew：用于安装NodeJS和其他工具。注：Homebrew详解，对这个比较了解的略过，我也是用mac... 查看详情

arcgisapiforjavascript开发环境搭建及第一个实例demo

一、安装前准备    1、ArcGISServerforJavaScriptAPI各版本下载地址：http://support.esrichina-bj.cn/2011/0223/960.html，我们选择下载最新的“ArcGISAPIforJavaScript3.9：Library|SDK”,如下图所示：  &n 查看详情

reactnative的概述,reactnative的优缺点,reactnative开发/运行环境的搭建(代码片段)

ReactNative概述React是一个构建用户界面的JS框架,实现了数据的响应式和组件化开发,本身既可以用于Web网站项目,也可以用于创建移动端App项目.相较于Vue.js在移动端只能构建WebApp,React生态系统中有一个可以构建"真正原生App"的... 查看详情

[转]在mac上搭建reactnative开发环境

...article/details/53914336概述前面我们介绍过在window环境下开发ReactNative项目，今天说说怎么在mac上搭建一个RN的开发环境。配置mac开发环境基本环境安装1.先安装Homebrew：用于安装NodeJS和其他工具。 注：Homebrew详解，对这个比较了... 查看详情

reactnative学习环境搭建

需安装工具RN环境：[必须]Node[必须]react-native-cli[可选]NodePackageManager(npm):node包管理工具,一般安装Node会带上npm*[可选]NodeVersionManager(nvm):node版本管理工具*[可选]watchman*[可选]flowiOS端：[必须]Xcode安卓端：[必须]Java环境[必须]AndroidStudio... 查看详情

reactnative入门一<初识reactnative>

参考技术A2015年3月26日,FaceBook公司正式对外发布了ReactNative使用ReactNative开发者可以更高效的开发移动应用，ReactNative的诞生就是为了能在保持原生良好的交互体验的同时又极大的提高开发效率在使用ReactNative之前需要先了解一下Re... 查看详情

go----go语言快速体验之开发环境搭建及第一个项目helloworld

文章目录​​一、Go开发环境搭建​​​​1.1下载安装Go​​​​1.2下载安装配置Goland编辑器​​​​二、使用Goland创建第一个项目​​​​2.1配置Go的版本号​​​​2.2创建HelloWorld项目​​一、Go开发环境搭建1.1下载安装Go(1)从... 查看详情