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等组件。代码如下:

  1. import React,{ Component } from 'react';
  2. import {
  3. AppRegistry,StyleSheet,View
  4. } from 'react-native';

2.创建组件

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

  1. export default class demo01 extends Component {
  2. render() {
  3. return (
  4.  
  5. );
  6. }
  7. }

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

3.添加样式表

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

  1. styles = StyleSheet.create({
  2.  
  3. });

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

@H_502_26@4.注册入口

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

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

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


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

猜你在找的React相关文章