ReactNative初体验--配置和安装

前言

开始知道react native的时候,看着要配置软件就发怵,然后就一直没学习,后来在朋友的介绍下,产生对它的兴趣,然后便开启对react的探索旅程。
捣鼓了一天终于写了一个HelloWord,现在记录下过程,以方便后续的进行。

安装

首先安装步骤都是在终端上进行操作的

1.安装Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

当出现success,则安装成功了,耐心等待。

2.安装Node
brew install node
3.安装完 node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.Yarn、React Native的命令行工具(react-native-cli)
npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

以上我也是摘取的管网的原话,感觉有问题的可以直接去官网查看
我相信看文章的应该都是开发过app的啦,所以肯定有了Android studio
接着

ANDROID_HOME 环境变量配置

首先确定自己的sdk路径

# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk

其次打开.bash_profile文件

vim .bash_profile

然后将第一步的代码加入到打开的文件中

 i  编辑文件
esc 退出编辑
:x 保存退出

然后使用下列命令使其立即生效

source ~/.bash_profile

最后可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

测试安装

react-native init AwesomeProject //新建一个项目
cd AwesomeProject //到项目的位置
react-native run-android //执行项目

假如你很幸运一遍就顺利运行出来了,那接下来就创建你自己的helloword吧
更改你的app.js试试~~

测试项目遇到的问题

一.unable to load script from assets 和could not connect to development server.

解决办法:
1.在 android/app/src/main 目录下创建一个 assets空文件夹

mkdir android/app/src/main/assets

2.在项目根目录运行

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

参考文档
二.Could not connect to development server
命令行执行

adb reverse tcp:8081 tcp:8081

不行的话
可以借鉴一下
再不行只能自己想办法了

资料

官方文档

喵印~~~

    原文作者:喵主子的阳光
    原文地址: https://www.jianshu.com/p/bf92478ec80e
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞