快速学习RN之环境搭建和跑demo(一)

RN即React Native 基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,RN也差不多了解了,下面的环境搭建是基于Windows系统,本身做安卓开发,安卓环境就不说了.

安装node.js

选择稳定版并配置好环境变量命令窗口看到版本号了就ok

安装Python2

Python 的版本必须为 2.x,不支持 3.x

设置npm镜像地址,方便后面更快安装依赖

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

使用yarn替代npm速度更快

安装yarn

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

后面用yarn代替npm install命令&＃xff0c;就使用yarn add 某第三方库名代替npm install 某第三方库名

配置安卓开发环境

下载android studio最新稳定版目前是3.2
下载jdk 1.8版本
配置sdk环境变量
配置jdk环境变量

下载编辑器VSCode

安装常用的必备插件

Auto Close Tag
Auto Rename Tag
Debugger for Chrome
Eslint
HTML CSS Support
Open in Browser
React Native Tools
vscode-icons
...

初始化一个RN工程 AwesomeProject(你的工程名字)

react-native init AwesomeProject

使用VSCode编辑器打开工程文件夹

在VSCode 快捷键 Ctrl&＃43;~ 开启命令终端其他终端都可以

//安装所需要的依赖库成功后会出现一个node_moudles文件夹 yarn install //构建运行应用(也是用gradle构建) react-native run-android

如果发现错误Could not generate a proxy class for class com.android.build.gradle.tasks.BuildArtifactReportTask,这个问题困扰我大半天时间,最终解决方案是降低gradle的插件版本为3.0.0 gradle版本4.4不用变即可

工程目录结构

仅先了解这些吧从上至下

android //安卓工程
ios//iOS工程
node_moudles//依赖库
app.json//工程名字配置等
App.js//组件
index.js//启动入口
package.json//依赖配置信息

配置TypeScript

为什么这里直接就要是有TypeScript了呢,因为适用,因为公司的项目初始化就是TS的工程了,不得不学,JS虽然很强大,但TS更强大更规范了,不允许你乱写,没有规范哪里行,所以避免被JS乱象影响,直接使用TS吧,至于区别,这个我也是刚刚学习,大家自行自学哈

添加typescript

yarn add -D typescript yarn add -D &＃64;types/react &＃64;types/react-native

生成tsconfig.json

tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --rootDir ./ --module commonjs --jsx react

里面的参数配置目前我也不是很清楚,后面可以慢慢看,暂时不需要管.有需要去查阅文档 tsconfig.json

将App.js改成App.tsx 如果有报错,改掉错误

编写组件

//导包 import React, {Component} from &＃39;react&＃39;; import {Platform, StyleSheet, Text, View} from &＃39;react-native&＃39;; type Props &＃61; {};//这里不懂没关系不管它先 //创建组件 export default class App extends Component {render() {return (Welcome to React Native!To get started, edit App.js{instructions} );} } //样式设置 const styles &＃61; StyleSheet.create({container: {flex: 1,justifyContent: &＃39;center&＃39;,alignItems: &＃39;center&＃39;,backgroundColor: &＃39;#F5FCFF&＃39;,},welcome: {fontSize: 20,textAlign: &＃39;center&＃39;,margin: 10,},instructions: {textAlign: &＃39;center&＃39;,color: &＃39;#333333&＃39;,marginBottom: 5,}, });

从上面的结构来看,我们想象所有的组件是基于React.Component派生的子组件就像android的自定义View一样
public class MyView extends View{} 是一样的道理
render() //渲染视图就像android的onDraw()/draw()
return中的内容就是布局视图这里直接返回比android 简单的不要太多配合export 关键字导出的意思,就是对外提供使用,就像public 我理解.
View 布局标签就相当于android中的LinerLayout,这时候你会想,那相对位置怎么设置呢,后面我们就会接触到Flex盒子布局,android中其实也有
Text 文本标签就相当于android中的TextView了
还有很多很多标签,用到的时候去官方文档一查找就行了,不需要一个个的去学习.
style 控制布局和标签组件的样式写法固定记住就好 style&＃61;{styles.xxx}或者style&＃61;{{color:&＃39;white&＃39;,xxxx,xxxx}}