React-Native之基本语法(二)

郑恩地

下面我们先看一段代码,然后通过代码我来介绍下基本的语法(我尽量都使用ES6的语法):

// 1.加载React,Componet组件
import React,{compoent} from 'react'

// 2.加载原生组件
import
{
   AppRegistry,
   StyleSheet,
   View,
   Text
}
from 'react-native'

// 3.自定义组件,作为程序入口组件
export default class Hello extends Component {

// 当加载组件的时候,就会调用render方法,去渲染组件
render(){
    var str = 'hello';
    return (
        <View style={styles.mainStyle}>
           <Text style={{flex:1,color:'#eeeeee'}}>Hello啊!</Text>
           <Text style={{flex:1,color:'#eeeeee'}}>{str}</Text>
        </View>
    )
  }
}

// 4.创建样式表
// 传入一个样式对象,根据样式对象中的描述,创建样式表
var styles = Stylesheet.create({
     mainStyle:{
        flex:1,
        backgroundColor:'red'
     }
 })

// 5.注册组件,程序入口
// 第一个参数:注册模块名称
// 第二个参数:函数, 此函数返回组件类名, 程序启动就会自动去加载这个组件
AppRegistry.registerComponent('Hello',()=>Hello)

ReactNative语法:

1. 和iOSimport那样导入系统文件和自定义组件(Component)；

   import React,{compoent} from 'react'
   

2.导入需要的系统组件和样式 :
View和Text都是系统的组件

import
{
   AppRegistry,
   StyleSheet,
   View,
   Text
}
from 'react-native'

3.创建自定义组件（可以把组件理解成类 ）
export default指的是对外可见.
一个页面可以写多个组件，至少有一个对外可见，只有这样组件才可能被引用到.
Hello组件继承自Component组件。

  export default class Hello extends Component

4.render()方法
用于渲染组件.
方法的实现部分是:方法名+()+{}.
var代表所有类型,系统会有自动判断类型的机制在里面对变量的类型进行判断.
return括号后面接的都是界面布局.
标签可以选择单标签或者双标签.
布局最外层要有个根控件包住所有子布局.
对象和字典都需要放在{}中.
样式可以写成下面Text那种或者写成样式表.

 render(){
    var str = 'hello';
    return (
        <View style={styles.mainStyle}>
           <Text style={{flex:1,color:'#eeeeee'}}>Hello啊!</Text>
           <Text style={{flex:1,color:'#eeeeee'}}>{str}</Text>
        </View>
    )
  }

5.样式表
Stylesheet是系统组件,我们需要在头文件中import.
flex：1指的是该组件在布局中占一份.

    var styles = Stylesheet.create({
     mainStyle:{
        flex:1,
        backgroundColor:'red'
     }
 })

6.注册组件,程序入口
第一个参数:注册模块名称.
第二个参数:函数, 此函数返回组件类名, 程序启动就会自动去加载这个组件.
用引号括起来的'Hello'必须和你init创建的项目名一致,不要随便去改.
()=>是ES6里面function的一种新写法.

    AppRegistry.registerComponent('Hello',()=>Hello)

传送门：RN中文文档关于语法的讲解