react native学习笔记（三）

ruicbAndroid 发布于2019-06-25 16:41 / 2667人阅读

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

Props（属性）

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。

以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的prop来指定要显示的图片的地址，以及使用名为style的prop来控制其尺寸。

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

class Bananas extends Component {
  render() {
    let pic = {
      uri: "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg"
    };
    return (
      
    );
  }
}

AppRegistry.registerComponent("Bananas", () => Bananas);

译注：在iOS上使用http链接的图片地址可能不会显示，参见这篇说明修改。

请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：

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

class Greeting extends Component {
  render() {
    return (
      Hello {this.props.name}!
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
}

AppRegistry.registerComponent("LotsOfGreetings", () => LotsOfGreetings);

我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在JSX语句中，用法和内置组件并无二致——这正是React体系的魅力所在——如果你想搭建一套自己的基础UI框架，那就放手做吧！

上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器，来帮助控制布局和样式。

仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的UI组件了。要学习如何动态修改你的界面，那就需要进一步学习State（状态）的概念。

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

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

react native学习笔记（二）

摘要：但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言开发中还很少使用。这叫做是一种在中嵌入结构的语法。模块则是用来告知哪一个组件被注册为整个应用的根容器。编写Hello World React Native看起来很像React，只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构，首先需要了解一些基本的React的概念，比如JSX语法、组件、...

OnlyLing 2019-06-25 16:42 评论0 收藏0
7月份前端资源分享

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

pingan8787 2019-08-20 17:53 评论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
React.js学习笔记之JSX解读

摘要：学习笔记之解读前端技术不多说，大腿很粗什么是是的核心组成部分，它使用标记的方式去直接声明界面，界面组件之间可以互相嵌套。它的目的是通过各种编译器将这些标记编译成标准的语言。的标签与函数名都是使用的驼峰命名。目前，一个的，只能返回一个节点。 React.js学习笔记之JSX解读 @(前端技术) Why React? 不多说，Facebook大腿很粗什么是JSX JSX是React的核心...

tianlai 2019-08-19 17:38 评论0 收藏0