React Native学习笔记(0)－－index.ios.js的结构

本篇是在学习《React Native入门与实战》这本书时做的笔记，代码基于React Native 0.44实现的，算是对该书中代码的小小更新。

1.加载View组件

创始好项目后，打开index.ios.js，引入react-native，并加载View等组件。代码如下：

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,View
} from 'react-native';

2.创建组件

创建组件就是继承自Component，实现render()方法，然后在里面添加用于渲染的界面的JSX语句。一个基本的组件结构如下：

export default class demo01 extends Component {
  render() {
    return (

    );
  }
}

render()方法返回的是一个JSX对象，该对象只能包含在一个节点中，其中的export default两个关键字不是必须的。

3.添加样式表

样式表分内联样式和外部样式，建议使用外部样式，使用外部组件一方面可以重复使用定义的样式，另一方面就是让代码更简洁。

styles = StyleSheet.create({

});

可以以组件为单位，然后创建不同的样式对象，这样即实现了解藕，也达到了封装的目的。

4.注册入口

每一个应用都应该有一个入口，这样就可以根据入口组件动态加载其他组件。React Native提供了AppRegistry API来完成这件事。

AppRegistry.registerComponent('demo01',() => demo01);

registerComponent的第二个参数就是我们第2步创建的组件名。

下一篇将使用View组件实现“九宫格”效果。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!