zoukankan      html  css  js  c++  java
  • RN State(状态)

    State(状态)

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

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

    image

    实际开发中,我们一般不会在定时器函数(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。

    image

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

    image

    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);
        });
    }
    

    image

    • 使用其他的网络库

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

    image

    • 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);
    };
  • 相关阅读:
    uva 11404 Palindromic Subsequence(LCS回文串,最小字典序)
    paip.输入法编程---输入法ATIaN历史记录 v8b
    uva 10859 Placing Lampposts (树形dp)
    【设计模式】学习笔记8:命令模式
    Android自定义ProgressDialog
    (二十四)解释器模式详解
    Hadoop--两个简单的MapReduce程序
    BMP图像的灰度化---C++实现
    android 数组数据绑定到listview
    Win64 驱动内核编程-10.突破WIN7的PatchGuard
  • 原文地址:https://www.cnblogs.com/liuxiaokun/p/12684757.html
Copyright © 2011-2022 走看看