react native学习笔记（二）

OnlyLing 发布于2019-06-25 16:42 / 1056人阅读

摘要：但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言开发中还很少使用。这叫做是一种在中嵌入结构的语法。模块则是用来告知哪一个组件被注册为整个应用的根容器。

编写Hello World

React Native看起来很像React，只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构，首先需要了解一些基本的React的概念，比如JSX语法、组件、state状态以及props属性。如果你已经了解了React，那么还需要掌握一些React Native特有的知识，比如原生组件的使用。这篇教程可以供任何基础的读者学习，不管你是否有React方面的经验。

让我们开始吧！

Hello World

根据历史悠久的“传统”，我们也来写一个“Hello World”：

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

class HelloWorldApp extends Component {
  render() {
    return (
      Hello world!
    );
  }
}

// 注意，这里用引号括起来的"HelloWorldApp"必须和你init创建的项目名一致
AppRegistry.registerComponent("HelloWorldApp", () => HelloWorldApp);

你可以新建一个项目，然后用上面的代码覆盖你的App.js文件，然后运行看看。

那这段代码是什么意思呢？

初看这段代码，可能觉得并不像JavaScript——没错，这是“未来”的JavaScript.

首先你需要了解ES2015 （也叫作ES6）——这是一套对JavaScript的语法改进的官方标准。但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言web开发中还很少使用。React Native内置了对ES2015标准的支持，你可以放心使用而无需担心兼容性问题。上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话，可以看看阮一峰老师的书，还有论坛的这篇总结。

示例中的这一行Hello world!恐怕很多人看起来也觉得陌生。这叫做JSX——是一种在JavaScript中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React反其道而行之，设计的JSX语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像web上的HTML，只不过使用的并不是web上常见的标签如

或是等，这里我们使用的是React Native的组件。上面的示例代码中，使用的是内置的组件，它专门用来显示文本。

组件与AppRegistry

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/16986.html

7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0
react-native 开发笔记（二）

摘要：原来需要在里面把字体拖进去，然后在里面配置一个里面的配置项如果没有这条，可以新增一个，然后选择到 react-native 开发笔记 Navigator导航 app的导航路径是tab->tabItem->tabItemChild，交互设计的要求是tab子页面的显示是要盖过tab导航条的，如果我们把tab作为根组件，Navigator作为tab的子tab的话，tabItemChild始终...

nidaye 2019-08-21 11:40 评论0 收藏0
react native学习笔记（三）

摘要：以常见的基础组件为例，在创建一个图片时，可以传入一个名为的来指定要显示的图片的地址，以及使用名为的来控制其尺寸。括号的意思是括号内部为一个变量或表达式，需要执行后取值。要学习如何动态修改你的界面，那就需要进一步学习状态的概念。 Props（属性）大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。以常见的基础组件Image为例，在创建一个图片...

ruicbAndroid 2019-06-25 16:41 评论0 收藏0
react native学习笔记（四）

摘要：是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。你也可以使用一些状态容器比如来统一管理数据流译注但我们不建议新手过早去学习。那么我们一起来学习一下样式吧。 State（状态）我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。一般来...

qpal 2019-06-25 16:44 评论0 收藏0
react-native, react-navigation, redux 学习笔记

摘要：的使用用户发出函数算出新的重新渲染三大原则单一数据源，利用的形式向下传播数据流决定只读，通过修改通过纯函数来修改组件状态，是描述动作的纯函数连接和基于全局的，选择我们要注入的不同的组件分开把注入，读取方法三剑客先确定一下初始状 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...

妤锋シ 2019-08-20 17:47 评论0 收藏0