402v /posts/javascript-for-react-nativeyu-fa-jiao-cheng-guide-images

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

status: publishedNotevisibility: publicplato12/19/2015
#ios#React Native#javascript#jsx

对非前端开发者学习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

评论 · 0

还没有评论。