react native学习笔记（四）

qpal 发布于2019-06-25 16:44 / 1424人阅读

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

State（状态）

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

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : " ";
    return (
      {display}
    );
  }
}

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

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

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout等）中来操作state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流（译注：但我们不建议新手过早去学习redux）。

State的工作原理和React.js完全一致，所以对于处理state的一些更深入的细节，你可以参阅React.Component API。

看到这里，你可能觉得我们的例子总是千篇一律的黑色文本，太特么无聊了。那么我们一起来学习一下样式吧。

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

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

react native学习笔记（二）

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

OnlyLing 2019-06-25 16:42 评论0 收藏0
react native学习笔记（三）

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

ruicbAndroid 2019-06-25 16:41 评论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
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0