前两篇已经把安装环境及IDE配置好了,接下来就开始编写第一个React Native 吧。(提前说一下目前水平,搞了4年Android开发,在学习React Native之前从没接触过React,JSX这些东西,自学过一点点JS,可以说是零基础学习React Native)。
接下来 按照我们学习一门语言的古老传统,我们先来写一个Hello World吧!
打开subline ,启动Terminal终端,进入你想创建工程的目录下,执行
react-native init HelloWorld
等待工程创建完毕。(很多人说这个过程太慢,有时还会创建失败,其实只要在配置安装环境时设置好镜像,还是很快的)
使用subline 打开工程目录,并打开index.android.js
删除默认程序,编写如下程序:
import React,{Component} from 'react';
import{
AppRegistry,
Text
}from 'react-native';
class HelloWorld extends Component{
render(){
return(
<Text>Hello World!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);
终端中
cd HelloWorld
react-native run-android
程序运行如下:
好了,虽然还不知道上面那段代码什么意思,但现在已经成功的运行了HelloWorld。现在看不懂没关系,不要慌,就像官网说的Don't panic. This is the future.哈哈!
下面来分析一下这个代码
首先import, from, class, extends这些关键字以及()=>这个句法均是ES6中的固定语法,现在只要知道这个是固定语法就行了。而且
import React,{Component} from 'react';
import{
AppRegistry,
... ....
}from 'react-native';
这个算是固定写法吧
class HelloWorld extends Component 意思就是定义一个名为HelloWorld 的新组件,好像我们Android里标准的类继承写法啊。
render(){}这是一个渲染函数,每一个组件都必须有这个渲染函数,否则组件是无法显示的,在render()中还有一个return函数,里边包含了我们写的JSX代码;
其次是<Text>Hello World!</Text> 这个是JSX语法,一种在JS中使用XML的语法,首先是在import中导入了声明,然后才可以使用,这不和我们java一个道理嘛。这里的<Text>其实就是类似于我们Android中的TextView用来显示文本。
最重要的事最后一句AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);
这是应用的启动入口,就像每个Android程序的启动Activity一样,意思是我们的HelloWorld被注册成为一个新的组件,并且为启动入口,AppRegistry.registerComponent()在整个程序中只可能出现一次。
到现在为止,虽然我还不知道JSX,ES6这些语法,但已经大概搞清楚了HelloWorld 这个工程的大概结构,其实和我们Android还是有些相似地方的。
下一篇搞定Props和State。