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组件实现“九宫格”效果。