RN入门简要知识图谱

[TOC]

前言

本文面向人群是有编程经验，但是对js, rn 都不太了解的同学。主要介绍了入门RN所需的知识图谱和相关资料，帮助大家快速入门，可结合Demo进行训练，Demo内通过打开注释来展示不同效果

DEMO

RN入门简要知识图谱Demo

RN开发知识图谱

RN开发大致需要掌握以下知识：

• JS, ES6
• JSX
• Flex布局
• RN常用组件

其中 JS 大致了解基本语法即可，后续边开发边参考《高级开发指南》与《权威指南》，随着开发的深入，再加深了解，不建议一上来就开始翻着很厚的书看，这样比较费时，效果也不好，而且容易放弃

开发环境搭建

• 参考搭建开发环境 搭建RN开发环境，可使用VSCode 或 WebStorm 进行开发，或直接Clone Demo

JS

基本语法

• var let const class

基本类型

• number
• string
• boolean
• object
  • 狭义对象 object
  • array
  • function
• undefined
• null

基本语句

• if else
• switch case

除以下六个值，都会被转为false

• undefined
• null
• false
• 0
• NaN
• '' / "" （空字符串）

函数

• 函数
• 箭头函数
  • 避免this 问题
  • 由于绑定是在render中执行，而render是会执行多次的，每次bind和箭头函数都会产生一个新的函数，因而带来了额外的开销，简单来说就是避免额外开销
  • 小结一下，有了箭头函数，就可以像OC里使用self一样，this也可以使用的飞起

其他补充说明：

• 无

参考资料：从入门到放弃系列

• ECMAScript 6 入门
• 《JavaScript权威指南第6版》
• 《JavaScript高级程序设计（第3版）》

代码示例

见Demo

Flex布局

RN采用的是Flex布局，可参考以下文档进行学习，可结合Demo进行修改训练

• Flex布局教程：语法篇
• React Native布局详细指南
• 官方文档翻译 使用Flexbox布局
• 官方文档翻译 布局样式属性
• 官方文档翻译 颜色
• 官方文档翻译 样式
• CSS 参考手册 用于查找对应的CSS详细定义
• RN Layout FlexBox.xmind

JSX

JSX 就是在JS中包括标签或组件的一种写法，大致

• 基本语法，参考Demo

• State props，这两个概念比较重要，要详细了解

• 条件渲染

• 引入其他文件

  import Jsx from "./Jsx";
  

• 回调函数，回调函数的写法，从cell 触发事件 回调到 FlatList 所在的 class ，然后由class处理时间，比如修该cell高度等

  //在FlatList calss 内，渲染 Item 的时候 ,传入一个 func ,该函数为本class的函数
  
  
  _pressedCell = (object) => {
      
  }
      
  //在 cell 内 就可以拿到该 func，然后触发该函数就，同时传参
  _pressEvent = () => {
      this.props.func(this.props.data);
  }
  
  

• 关闭警告

  console.disableYellowBox = true;
  console.warn('YellowBox is disabled.');
  

• 原生Bridge写法

• 参考文档 React 官方文档翻译

其他补充说明：

• console.log
• alert

关于 js jsx

Js:

• ECMAScript 6 入门
• 《JavaScript权威指南第6版》《JavaScript高级程序设计（第3版）》

Jsx:

• React 官方文档翻译

RN常用组件

常用组件比如View, Image, Text等等，具体使用参见官方文档翻译 RN文档中文站点

调试

• 断点调试、log 输出、alert 弹框
• 官方文档翻译 调试

参考文档

• RN文档中文站点
• ECMAScript 6 入门
• React-Native学习指南 本指南汇集React-Native各类学习资源
• awesome-react-native Awesome React Native components, news, tools, and learning material!

参考书单

• 《JavaScript权威指南第6版》
• 《JavaScript高级程序设计（第3版）》
• ECMAScript 6 入门
• 《React Native入门与实战》 （大致翻一遍了解下，不用细看，以后遇到问题可以再细翻）
• 《Reactive Native 开发指南》（这本书有点过时，大致翻一遍就好）