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

前端之家收集整理的这篇文章主要介绍了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组件实现“九宫格”效果

猜你在找的React相关文章