RN State(状态)

State(状态)

使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。对于需要改变的数据,我们需要使用state。

一般来说,你需要在class中声明一个state对象,然后在需要修改时调用setState方法。

实际开发中,我们一般不会在定时器函数(setInterval、setTimeout 等)中来操作 state。典型的场景是在接收到服务器返回的新数据,或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。

一切界面变化都是状态state变化

  • state的修改必须通过setState()方法
  • this.state.likes = 100; // 这样的直接赋值修改无效!
  • setState 是一个 merge 合并操作,只修改指定属性,不影响其他属性
  • setState 是异步操作,修改不会马上生效

TextInput 文本输入

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性,会在文本被提交后(用户按下软键盘上的提交键)调用。

  • Touchable 系列组件

这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计,那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮,

或者你也可以在 github.com 网站上搜索 ‘react native button‘

一般来说,你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

在 Android 上还可以使用TouchableNativeFeedback,它会在用户手指按下时形成类似墨水涟漪的视觉效果。

TouchableOpacity会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。

如果你想在处理点击事件的同时不显示任何视觉反馈,则需要使用TouchableWithoutFeedback。

  • ScrollView

ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。

ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染,哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表,那么应该使用功能差不多但性能更好的FlatList组件。

  • 长列表数据的组件

一般而言我们会选用FlatList或是SectionList。

FlatList组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。

FlatList更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源,而renderItem则从数据源中逐个解析数据,然后返回一个设定好格式的组件来渲染。

下面的例子创建了一个简单的FlatList,并预设了一些模拟数据。首先是初始化FlatList所需的data,其中的每一项(行)数据之后都在renderItem中被渲染成了Text组件,最后构成整个FlatList。

如果要渲染的是一组需要分组的数据,也许还带有分组标签的,那么SectionList将是个不错的选择

Fetch网络请求

  • 发起请求

要从任意地址获取内容的话,只需简单地将网址作为参数传递给 fetch 方法即可(fetch 这个词本身也就是获取的意思):

fetch(‘https://mywebsite.com/mydata.json‘);

Fetch 还有可选的第二个参数,可以用来定制 HTTP 请求一些参数。你可以指定 header 参数,或是指定使用 POST 方法,又或是提交数据等等:

fetch(‘https://mywebsite.com/endpoint/‘, {
  method: ‘POST‘,
  headers: {
    Accept: ‘application/json‘,
    ‘Content-Type‘: ‘application/json‘,
  },
  body: JSON.stringify({
    firstParam: ‘yourValue‘,
    secondParam: ‘yourOtherValue‘,
  }),
});
function getMoviesFromApiAsync() {
  return fetch(‘https://facebook.github.io/react-native/movies.json‘)
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

  • 使用其他的网络库

React Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。一些基于 XMLHttpRequest 封装的第三方库也可以使用,例如frisbee或是axios等。但注意不能使用 jQuery,因为 jQuery 中还使用了很多浏览器中才有而 RN 中没有的东西(所以也不是所有 web 中的 ajax 库都可以直接使用)。

  • WebSocket 支持

React Native 还支持WebSocket,这种协议可以在单个 TCP 连接上提供全双工的通信信道。

const ws = new WebSocket(‘ws://host.com/path‘);

ws.onopen = () => {
  // connection opened
  ws.send(‘something‘); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

原文地址:https://www.cnblogs.com/liuxiaokun/p/12684757.html

时间: 2024-10-29 14:13:21

RN State(状态)的相关文章

混合开发的大趋势之一React Native State (状态),Style(样式)

转载请注明出处:王亟亟的大牛之路 先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 今天又加了几个疑难杂症哦!! 上一篇讲了属性,这一篇主要讲 State Style,给出上次的传送门,以便有更好的连贯性:http://blog.csdn.net/ddwhan0123/article/details/52238478 State 状态 在RN中用来描述对象的除了属性Props还有状态State,那么状态又是个什么东西呢? T

State状态模式(C++实现)

状态模式:状态模式的意图是,允许一个对象在其内部状态改变时,改变它的行为.看起来就像是改变了它的类一样. 主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同的一系列类当中,可以把复杂的逻辑判断简单化. 类图如下图所示 State类,抽象状态类,定义一个接口以封装与Context的一个特定状态相关的行为.ConcreteState类,具体状态,每一个子类实现一个与Context的一个状态相关的行为.Context类,维护一个ConcreteState子类

设计模式(20)--State(状态模式)--行为型

作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 状态模式,又称状态对象模式(Pattern of Objects for States),状态模式是对象的行为模式. 状态模式允许一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它的类一样. 2.模式特点: 状态模式的主要优点在于封装了转换规则,并枚举可能的状态,它将所有与某个状态有关的行为放到一个类中,并且可以方便地增加新的状态,只需要改变对象状态即可改变对象的行为,还可以

State状态设计模式

1.状态模式:改变对象的行为 一个用来改变类的(状态的)对象. 2:问题:当你自己实现 State 模式的时候就会碰到很多细节的问题,你必须根据自己的需要选择合适的实现方法, 比如用到的状态(State)是否要暴露给调用的客户,以及如何使状态发生变化 用于改变状态的机制可能很简单也可能很复杂-比如状态机(State Machine) 3.代理(Proxy)设计模式实际上是状态设计模式的一个特例 4.类图以及UML(astah/jude)下载地址 : http://pan.baidu.com/s/

设计模式21:State 状态模式(行为型模式)

State 状态模式(行为型模式) 动机(Motivation) 在软件构建过程中,某些对象的状态如果改变,其行为也会随之而发生变化,比如文档处于只读状态,其支持的行为和读写状态的行为就可能完全不同. 如何在运行时根据对象的状态来透明地更改对象的行为?而不会为对象操作和状态转换之间引入紧耦合? 意图(Intent) 允许一个对象在其内部状态改变时改变它的行为.从而使对象看起来似乎修改了其行为.——<设计模式>GoF 结构(Structure) 示例代码 public enum Document

设计模式 ( 十八 ):State状态模式 -- 行为型

1.概述 在软件开发过程中,应用程序可能会根据不同的情况作出不同的处理.最直接的解决方案是将这些所有可能发生的情况全都考虑到.然后使用if... ellse语句来做状态判断来进行不同情况的处理.但是对复杂状态的判断就显得“力不从心了”.随着增加新的状态或者修改一个状体(if else(或switch case)语句的增多或者修改)可能会引起很大的修改,而程序的可读性,扩展性也会变得很弱.维护也会很麻烦.那么我就考虑只修改自身状态的模式. 例子1:按钮来控制一个电梯的状态,一个电梯开们,关门,停,

详解state状态模式及在C++设计模式编程中的使用实例

原文地址:http://www.jb51.net/article/80713.htm 这篇文章主要介绍了state状态模式及在C++设计模式编程中的使用实例,在设计模式中策略用来处理算法变化,而状态则是透明地处理状态变化,需要的朋友可以参考下 每个人.事物在不同的状态下会有不同表现(动作),而一个状态又会在不同的表现下转移到下一个不同的状态(State).最简单的一个生活中的例子就是:地铁入口处,如果你放入正确的地铁票,门就会打开让你通过.在出口处也是验票,如果正确你就可以 ok,否则就不让你通

程序设计模式 —— State 状态模式

我应该如何阅读? 本文将使用优雅的文字风格来告诉你什么是状态模式. 注意: 1.在阅读本文之前请保证你已经掌控了 面对对象的思想与 多态的基本概念,否则将难以理解. 2.本文实现将用C++实现,你不一定必须学会C++,这些代码都有非常丰富的注释和简单的语法. 3.请不要跳着看,除非你已经学会. 那么现在开始吧 或许你会以为是类的各种状态,其实差不多.但是还有各种行为 允许一个对象在其内部状态改变时改变它的行为.实例化的对象看起来似乎修改了它的类 首先,状态,顾名思义你应该就差不多明白.它可以表示

原生 JavaScript 实现 state 状态管理系统

原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在软件工程中,状态管理已经不是什么新鲜概念,但是在 JavaScript 语言中比较流行的框架都在使用相关概念.传统意义上,我们会保持 DOM 本身的状态甚至声明该状态为全局变量.不过现在,我们有很多状态管理的宠儿供我们选择.比如 Redux,MobX 以及 Vuex,使得跨组件的状态管理更为方便.这

设计模式---状态变化模式之state状态模式(State)

前提:状态变化模式 在组建构建过程中,某些对象的状态经常面临变化,如何对这些变化进行有效的管理?同时又维持高层模块的稳定?“状态变化”模式为这一个问题提供了一种解决方案. 典型模式 状态模式:State 备忘录模式:Memento 一:State状态模式 (一)概念 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化. (二)动机 在软