react native学习笔记2——Hello World和组件构成简介
来源:互联网 发布:js childnodes方法 编辑:程序博客网 时间:2024/05/20 22:03
相信配置好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
文件中即可运行。
- react native学习笔记2——Hello World和组件构成简介
- React Native入门——组件构成及生命周期简介
- React Native入门——组件构成及生命周期简介
- React Native入门——组件构成及生命周期简介
- react native 学习笔记之hello world
- React Native 学习笔记(一)---Hello, New World!
- React Native学习笔记二之写个Hello World
- react native学习笔记3——常见的基本组件简介
- react native学习笔记9——引入第三方组件和react-navigation的使用
- React Native入门——环境配置及Hello World
- React Native入门——环境配置及Hello World
- React Native入门——环境配置及Hello World
- react native学习笔记7——组件生命周期
- 初探react-native Hello World
- React Native 之 Hello World
- React Native版Hello World
- React-Native之Hello World
- react native 之hello world
- hdu 3863 No Gambling
- Linux下使用c++调用shell命令
- 【dp】POJ
- 二叉树的下一个结点
- JAVA闭包
- react native学习笔记2——Hello World和组件构成简介
- 8.14实战感悟
- hdoj1088
- [容斥] Codeforces#428 (Div. 2) 839D. Winter is here
- Day16
- Laravel中间件
- Linux安全弹出设备的小程序(c++)
- A
- 一些奇(mei)妙(yong)的搜索方式