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

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

安装node.js

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

Microsoft Windows [版本 10.0.17134.345]
(c) 2018 Microsoft Corporation。保留所有权利。C:\Users\JIngYuchun>npm -v
6.4.1
C:\Users\JIngYuchun>


安装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}}

好了,今天就写这些,不出意外,你现在已经跑起来了,大概有了一些了解RN的工程结构等,下面就是你自己随意霍霍App.tsx里的内容了 ,尝试修改布局和样式.

接下来我们要学习React Native的属性props和状态state 这块比较重要,等我了解差不多了,便会推送下一篇总结.

莫着急,一点一点来,一点一点攻破.