背景
首先,你得确定项目可以跑起来了
环境搭建好以后,我们得开始学着动手编写项目了,还是老规矩,Hello World!
项目已经调试好了,也可以成功运行了,我们得进阶了!
如果还是不知道怎么搭建环境,可以返回去看一下之前的学习笔记2:环境搭建。
原谅我也是新手,只能业余时间学学,进度很慢
导入Android Stduio
- 打开Android Studio,导入项目中的android文件夹
- 都用默认就好了,Gradle会自动配置项目的
- 这时候你可以看看项目了,是不是看不懂,也不知道咋改?反正我是这感觉,因为这是android工程,而我们要改的是 index.android.js,别着急,往下看。
编写Hello World
- 到工程目录下,找到index.android.js
- 打开之后,把里面的内容全部删掉
- 我们自己写个Hello World!
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
//这个类名可以随便起,继承自组件
class HelloWorldApp extends Component {
render() {
return (
<Text >
Hello world!{'\n'}
{'\n'}
Hi!第一个项目诞生了!{'\n'}
如果要换行,就用这个{'\n'}
保存,然后双击键盘上的R来Reload{'\n'}
如果是真机,就晃一晃,然后选择Reload
</Text>
);
}
}
/**
* 注册组件
* @params 工程名(init时候的名字)
* @params 本类的类名
*/
AppRegistry.registerComponent('MyProject', () => HelloWorldApp);
总结
这个语法是ES6和XML的混合体,尼玛,和我们之前接触的岂止是不太一样?兼职就是太不一样了!ES6语法可以理解为未来的JS语法,RN对它的兼容还是不错的,但是我个人并不是很熟悉,甚至JS也只是知道一些基本的,XML还好,因为android的布局基本都是用这个做的。
-
JSX示例:
<Text>Hello world!</Text>
比如这个语法,XML语法里,并没有Text关键词,js里you,FB机智的把它们融合了...
感觉就想学这么个知识点,结果越扯越多了,还得努力啊,感觉自己好挫!