当前位置 : 首页 » 博文聚焦 » 正文

react native学习笔记2——Hello World和组件构成简介

分类 : 博文聚焦 | 发布时间 : 2017-08-14 21:18:59 | 浏览 : 653

相信配置好rn环境的朋友,在初始化好第一个项目AwesomeProject后会忍不住尝试动手改一改、试一试。下面还是遵循古老传统从hello world开始表演,可以在最初搭建好环境时新建的第一个项目AwesomeProject的基础上,用下面的代码覆盖你的index.ios.js或是index.android.js 文件(在项目的根目录下),然后运行看看。

Hello World

import React, { Component } from 'react';
import { AppRegistry, Text, StyleSheet } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text style={styles.hello}>Hello world!</Text> ); } } const styles = StyleSheet.create({ hello: { fontSize: 20, margin: 10, } }); // 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致 AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

index.android.js 和 index.ios.js 分别作为Android手机和iOS手机上程序开始的入口。

大体结构

上面的代码段大致可以分为四个部分:

1.组件导入: 所有用到的组件都需要事先进行导入,包括样式也需要进行导入

import React, { Component } from 'react';
import { AppRegistry, Text, StyleSheet } from 'react-native';

2.核心代码:所有逻辑代码编写的地方

class HelloWorldApp extends Component {
  render() {
    return (
      <Text style={styles.hello}>Hello world!</Text> ); } }

3.组件样式:render()方法中用到的组件的样式,可以集中在这里编写

const styles = StyleSheet.create({
  hello: {
    fontSize: 20,
    margin: 10,
  }
});

4.注册启动组件:组件只有注册后才能运行。这里用到的AppRegistry也需要在组件导入区进行导入.

注意,这里用引号括起来的’HelloWorldApp’必须和你init创建的项目名一致。

AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

组件——Component

上面多次提到一个重要的名词——组件(Component),在React Native项目中每个界面都是由一个个小组件组成的大组件。在Hello World实例代码中<Text>Hello world!</Text><Text>就是React Native的内置组件,专门用来显示文本。而形如<Text>Hello world!</Text>的语法叫做JSX——是一种在JavaScript中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法,让你在结构标记中嵌入代码。React反其道而行之,设计的JSX语法却是让你在代码中嵌入结构标记。

流程——上面代码做了些什么事

上面的代码定义了一个名为HelloWorldApp的新的组件,并且使用了名为AppRegistry的内置模块进行了“注册”操作。你在编写React Native应用时,肯定会写出很多新的组件。而正如前面所说,一个App的最终界面,其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。

AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。你无需在此深究,因为一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次。上面的代码里已经包含了具体的用法,你只需整个复制到index.ios.js或是index.android.js文件中即可运行。

相关阅读:

Error:(23, 17) Failed to resolve: junit:junit:4.12

在React / React Native中使用构造函数与getInitialState有什么区别?

React Native android构建失败。未找到SDK位置

React Native Flexbox中的宽度为100%

React Native和React有什么区别?

在React Native中添加全屏背景图像的最佳方法是什么?

无法找到Build Tools修订版23.0.1

反应原生android无法加载JS包

无法从Windows上的资产index.android.bundle加载脚本

Info.plist中必须存在NSPhotoLibraryUsageDescription键才能使用相机胶卷