本篇是在学习《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组件实现“九宫格”效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。