React Native props & state
今天又敲了一丁点代码,看了一下props和state的用法
原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下,跟props一样都是
this.props.propertyName
this.state.stateName
这种形式,props和state是控制组件的两种类型,props是开发者自定义的组件参数,state表达的是一种状态用于控制组件的内容
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} from 'react-native'
class Blink extends Component{
constructor(props) {
super(props);
this.state = {showText: true,showRedColor:false};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText ,showRedColor:!this.state.showRedColor});
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
display = this.state.showRedColor ? "red color text":display
return (
<Text> {display}</Text>
);
}
}
class BlinkApp extends Component{
render(){
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great'/>
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me'/>
<RedTextView rdName='this is a text'/>
<RedTextView rdName='have not set color yet.'/>
<RedTextView rdName='end'/>
<BlueTextView blName='blue name begin'/>
<BlueTextView blName='has not set color yet'/>
<BlueTextView blName='blue name end'/>
</View>
)
}
}
class RedTextView extends Component{
render(){
return (
<View>
<Text>{this.props.rdName}</Text>
</View>
)
}
}
class BlueTextView extends Component{
render(){
return (
<View>
<Text>{this.props.blName}</Text>
</View>
)
}
}
AppRegistry.registerComponent('HelloWorld', () => BlinkApp);
React Native props & state的更多相关文章
- react native中state和ref的使用
react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...
- react中 props,state与render函数的关系
我们很明显的能够感受到,react是一门数据驱动的框架,当数据发生变化,页面就会自动发生变化,他背后的原理是怎么样子的呢 比如todolist例子里面,inputValue变了,框里面的内容就会自动变 ...
- react native props上存在的属性,显示不存在
问题:类型“Readonly<{}> & Readonly<{ children?: ReactNode; }>”上不存在属性“navigation”.ts(2339) ...
- [RN] 01 - Init: Try a little bit of React Native
Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascri ...
- [RN] 02 - Overview: React Native Practice of 50 lectures
观看笔记:零基础 React Native 实战开发视频 50讲 本篇效果:RN入门,整体认识 基本原理 # 1 React到RN # 2 一个简单的例子 /** * Sample React Nat ...
- 给所有开发者的React Native详细入门指南
建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...
- React Native中Mobx的使用
从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思 ...
- React Native开发之expo中camera的基本使用
之前做RN项目没调用过本地摄像头,今天下班早,做了一个简单的小demo:主要实现的功能:点击拍照按钮进入拍照界面,点击flip进行前后摄像头转换,点击开始拍照实现拍照功能(没写保存到本地的功能,大家可 ...
- react native中对props和state的理解
最近使用react native这个新的技术做完一个项目,所以赶紧写个博客巩固一下. 今天我想说的是props和state,当然这是我个人的理解,如果有什么不对的地方,望指正. 首先我先说说props ...
随机推荐
- .NET中使用Redis (二)
很久以前写了一篇文章 .NET中使用Redis 介绍了如何安装Redis服务端,以及如何在.NET中调用Redis读取数据.本文简单介绍如何设计NoSQL数据库,以及如何使用Redis来存储对象. 和 ...
- HackerNews——《Pokemon Go玩家存在巨大的安全风险》
译者注:原文来自HackerNews,首发tumblr,标题为Pokemon Go is a huge security risk.作者Adam Reeve,附一张这个胖子的帅照 (正文)之所以会 ...
- ABP框架 - 仓储
文档目录 本节内容: 默认仓储 自定义仓储 自定义仓储接口 自定义仓储实现 基仓储方法 查询 获取单个实体 获取实体列表 关于 IQueryable 自定义返回值 插入 更新 删除 其它 关于异步方法 ...
- 简单例子了解View的事件分发
什么是事件分发 我们在写自定义ViewGroup或者自定义View的时候经常要处理用户的点击事件,如果我们的View在最底层,他在很多ViewGroup里面,我们如何让我们的点击事件准确传递到View ...
- WCF学习之旅—请求与答复模式和单向模式(十九)
一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务端有了答 ...
- 【原】objc_setAssociatedObject和objc_getAssociatedObject
本文转载请注明出处--polobymulberry-博客园 两个函数名称中都有associate,意思是关联,这里的关联表示的是一种 从属关系,即有一个关联者和被关联者,我们说NSArray的对象ar ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(61)-如何使用框架来开发
系列目录 前言: 有些园友经常问如何正确快速开发,但是我告诉你没有什么帮助文档比自己动手做更加实在,不用代码生成器 这一节专门抽了些时间来非常非常详细演示这个框架的数据流,废话不多说,现在开始!下面看 ...
- Javascript之自定义事件
Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加.删除事件. 下面通过实例,一步一步构建一个具体的Javasc ...
- 无限循环轮播图之结构布局(原生JS)
html部分 <div class="box" id="box"> <ul> <li><img src="i ...
- Oracle数据加载之外部表的介绍
环境: 服务端:RHEL6.4 + Oracle 11.2.0.4 目录: 一. 创建外部表 1.1 创建外部表需要的目录 1.2 创建外部表 1.3 创建外部表源文件 1.4 查询外部表 二. 加载 ...