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

前端之家收集整理的这篇文章主要介绍了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机智的把它们融合了…

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

原文链接:https://www.f2er.com/react/305135.html

猜你在找的React相关文章