React Native学习笔记3：导入AndroidStudio及修改项目

背景

首先，你得确定项目可以跑起来了

• 环境搭建好以后，我们得开始学着动手编写项目了，还是老规矩，Hello World！

• 项目已经调试好了，也可以成功运行了，我们得进阶了！

• 如果还是不知道怎么搭建环境，可以返回去看一下之前的学习笔记2：环境搭建。
• 原谅我也是新手，只能业余时间学学，进度很慢

导入Android Stduio

1. 打开Android Studio，导入项目中的android文件夹
2. 都用默认就好了，Gradle会自动配置项目的
3. 这时候你可以看看项目了，是不是看不懂，也不知道咋改？反正我是这感觉，因为这是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机智的把它们融合了…

• 感觉就想学这么个知识点，结果越扯越多了，还得努力啊，感觉自己好挫！