首先把React引入进来,然后从'react'中把{ Component }(组建/模块)引入进来;
import React, { Component } from 'react';
从'react-native'中把{ AppRegistry、StyleSheet、Text、View }引入进来;以后要引用什么就在这里添加什么;
比如我将来要用到图象的东西,或者一个输入框,那么我们就可以从'react-native'导入Image,TextInput
import {
AppRegistry, //注册
StyleSheet, //样式
Text, //文本组件(相当于UILabel)
View //视图组件(相当于UIView)
} from 'react-native';
-
类分析:
- 面向组件开发(就是RN里面的任何一个类都可以通过注册产生一个组件);
- 上面的代码的意思是:
- 从Component继承下来创建一个类名为AwesomeProject类(js类的一种写法---es6的写法);
- 也就意味着我们上面那个类最终会生成一个组件,插入到我们的页面中,所以说只要是一个类都能够生成一个组建
- 上面代码中:
- render()是AwesomeProject类里面的一个方法/函数(这个方法可以理解成我们OC中的viewdidload:()方法),到后期再讲它的生命周期!
- render()方法是用来通过return返回具体的组件内容的;
- 我们一般都是在render()方法里面的return中编写界面的内容和结构;
-
样式分开写;
注意:
如果要添加多个View,应该是写在最外层的View里面,也就是最晚外层只有一个View,其他写在它里面;
- 样式:
- 所有的组件都有一个style属性来设置样式;
-
下面的代码意思是,定义一个样式变量styles,而下面的container是这个名字对应下的样式是这样子的,组件中调用了这个样式就会按照里面定义的样式来显示:{styles.container}
-
样式不多的时候,也可以直接写在style属性后面用{ }包括起来: