本篇是在学习《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步创建的组件名。