Linux系统搭建React Native开发环境

安装Node

安装npm

sudo apt install npm

使用官方源

注意：国内源少了很多React Navite的包，所以推荐使用官方源。如果下载老因网络出错，那只能想法搞下代理。

# 删除其他源，添加官方源。
npm config delete registrynpm config delete disturl
npm config set registry http://registry.npmjs.org

更新npm版本

sudo npm update npm -g

检查版本

npm -v

安装yarn

sudo npm i -g yarn

使用官方源

注意：国内源少了很多React Navite的包，所以推荐使用官方源。如果下载老因网络出错，那只能想法搞下代理。

yarn config set registry https://registry.yarnpkg.com

更新yarn版本

sudo npm update yarn -g

检查版本

yarn -v

安装node版本管理工具n

sudo npm i -g n

更新node到最新稳定版

sudo n stable

检查版本

node --version
yarn --version

安装Watchman

下载

下载watchman最新版本。

安装

解压下载的安装包，进入含有lbin和lib的目录，依次执行下列命令：

sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
sudo cp bin/* /usr/local/bin
sudo cp lib/* /usr/local/lib
sudo chmod 755 /usr/local/bin/watchman
sudo chmod 2777 /usr/local/var/run/watchman

检查版本

watchman --version

安装JDK11

下载

推荐下载清华镜像站OpenJDK11，下载这个速度最快最方便，但不是最新版的。
介意的可以访问adoptiumOpenJDK11，这里有最新版，但是下载慢。
或者访问oracleJDK11，这个需要注册账户，稍微麻烦一些。

安装

解压下载的安装包，进入含有lbin和lib的目录，依次执行下列命令：

sudo mkdir /usr/local/jdk11
sudo cp ./* /usr/local/jdk11 -r
sudo vim /etc/profile

在文件末尾添加以下内容：

export JAVA_HOME=/usr/local/jdk11
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib:$CLASSPATH
export JAVA_PATH=${JAVA_HOME}/bin:${JRE_HOME}/bin
export PATH=$PATH:${JAVA_PATH}
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

激活配置

source /etc/profile

检查版本

javac -version

安装android studio

安装前确保自己的网络可以联到谷歌的服务器，否则后面的安装肯定会失败。

下载

访问android studio官网，下载最新稳定版。

安装

解压下载的安装包，进入含有lbin和lib的目录，依次执行下列命令：

sudo mkdir -p /opt/apps/android-studio
sudo cp ./* /opt/apps/android-studio -r
sudo tee /usr/share/applications/android-studio.desktop <<-'EOF'
[Desktop Entry]
Encoding=UTF-8
Exec=/opt/apps/android-studio/bin/studio.sh
Icon=/opt/apps/android-studio/bin/studio.svg
Name=AndroidStudio
Terminal=false
Type=Application
Categories=Development;IDE;
EOF

安装界面中选择"Custom"选项，确保选中了以下几项：

• Android SDK
• Android SDK Platform
• Android Virtual Device
  然后点击“Next”来安装选中的组件。

创建虚拟设备

右侧选择“Device Manager”->"Virtual "->“Create device”，选择硬件和安卓版本后，会从谷歌服务器下载1个多G的安装包，安装成功后就创建了虚拟设备。

中文语言包

下载语言包

打开Android Studio，在“Help”-“About”找版本号，如下图红框处的数字：

红框标记的是“#AI-212”，记住212即可。然后访问jetbrains中文插件下载，选择212号版本的语言包下载。

安装语言包

解压下载的语言包，进入目录找到jar文件，记住该文件的路径。
打开Android Studio，菜单选择File —>Setting —>Plugins----> 点击齿轮 ----> Install Plugin from Disk 选择刚刚的jar文件，安装好会提示你重启才能生效，选择重启即可。

常用插件推荐

• CodeGlance：右侧有代码缩略图提示框，方便快速定位代码
• Rainbow Brackets：符号颜色配对
• Atom one theme：暗色主题
• Key Promoter X：帮助你记住快捷键

安装React Native

安装react native cli

yarn add react-native-cli --location=global

检查版本

react-native --version

测试React Native项目

创建项目

mkdir demo && cd demo
react-native init test

这一步可能会很慢，一定要加yarn的国内源，另外网络要有代理(react native下的有些包在国内源里没有)。
装好以后认真看提示：

 Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/home/windf/demo/test" && npx react-native run-android

测试项目

详见飞书文档`