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 开发指南》(这本书有点过时,大致翻一遍就好)

你可能感兴趣的:(RN入门简要知识图谱)