402's Dojo

Javascript for React Native语法教程 - GUIDE|Images

对非前端开发者学习React Native来说,可能是最好的JS语法教程。
作为一个iOS工程师,当我第一眼看到React代码的时候,脑海里浮现的到处都是WTF这货是啥?这里为啥有分号or等号,这里为啥没有?这个大括号是做啥的?这是在定义一个类?or What ever?。由于负责工作内容的原因,JS代码我也经常见,但是读一种语言和编写它完全是两码事,你必须知晓当前编写范例中的全部语法才能真正掌握它,尤其想Javascript这样的语言,而像我这么懒惰的人当然是希望用到某种JS语法的时候再去学习,而不是先花半个月时间啃一本Javascript的语法(我在其他语言上试过但是效果并不好)。于是便有了这篇Javascript的语法教程,专门给开始学习React Native的非前端开发者准备。
谁适合看这篇教程:

  1. 至少接触过一门静态 or 动态编程语言;
  2. 正在或者打算开始学习React Native。
    讲解顺序按照React Native教程的顺序,解释每一个代码实例涉及到的JS语法知识,尽量不去涉及代码理解过程中用不到的语法知识。如果在阅读过程中遇到没有涉及到同时又不明白的语法请告诉我,我会及时更新这系列的文章。
    由于作者也是初学者,文章内容在不断的矫正中,不求严格的正确,但求以最快的速度理解学习Javascript in React Native,不断修正自己的认识的同时使用它。
    对应React Native章节:
    GUIDES|Images

第一段代码 - Static Image Resources

<Image source={require('./my-icon.png')} />

React提供了一个Image组件,使用JSX的语法给Image组件传递一个source属性。
source属性的值是require()方法返回的对象。

require方法

require方法的作用是加载资源。?

常见用法:

  • require('http') 内置模块
  • require('./server') “./”表示当前路径,后面跟的是相对路径
  • require("../lib/server") ../表示上一级目录,后面跟的也是相对路径

第二段代码 - Background Image via Nesting

return (
<Image source={...}>
<Text>Inside</Text>
</Image>
);

返回一个Image组件,组件内嵌了Text子组件。

哈哈,这节写的很开心,一共也没有多少示例代码。看不过瘾的话可以继续看Image这个组件的用法

this指针

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)

Where to go

评论