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命令，就使用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+~ 开启命令终端 其他终端都可以
//安装所需要的依赖库 成功后会出现一个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 @types/react @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 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
type Props = {};//这里不懂 没关系 不管它先
//创建组件
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
//样式设置
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
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={styles.xxx}或者style={{color:'white',xxxx,xxxx}}
好了,今天就写这些,不出意外,你现在已经跑起来了,大概有了一些了解RN的工程结构等,下面就是你自己随意霍霍App.tsx里的内容了 ,尝试修改布局和样式.
接下来我们要学习React Native的属性props和状态state 这块比较重要,等我了解差不多了,便会推送下一篇总结.
莫着急,一点一点来,一点一点攻破.
