react-native 组件之间传值
1.通过 AsyncStorage 将值保存在本地(最低端的方法)
import {
AsyncStorage,
} from 'react-native'; // 保存 IP
AsyncStorage.setItem('LoginIP',new_value); // 获取IP
let ApiBase;
AsyncStorage.getItem('LoginIP')
.then((value) => {
that.setState({
ApiBase: value
});
});
2.定义成员属性 通过 props 传值(父组件向子组件传值)
CommunalCell.js
定义成员属性 接收外部传值
/**
* Cell
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native'; import PropTypes from 'prop-types'; export default class CommunalCell extends Component { // 定义成员属性
static propTypes = {
name:PropTypes.string,
gender:PropTypes.string,
}; render() {
return (
<View>
<Text>姓名:{this.props.name}</Text>
<Text>姓名:{this.props.gender}</Text>
</View>
);
}
} const styles = StyleSheet.create({ });
引用 传值
// 引入 cell
import CommunalCell from '../main/CommunalCell'; // 返回每一行cell的样式
renderRow(rowData) {
// 使用cell组件
return(
<CommunalCell
name={rowData.name}
gender={rowData.gender}
/>
);
}
3.通过回调方法传值 (子组件向父组件传值)
子组件
// 提供参数出去,便于外部调用
static defaultProps = {
removeModal:{}
} // 定义方法,便于组件触发
popToHome(data) {
// 向外部传值(向父组件传值)
this.props.removeModal(data);
} // 返回右边按钮
renderRightItem() {
return(
<TouchableOpacity
onPress={() => {this.popToHome(false)}}
>
<Text style={styles.navbarRightItemStyle}>关闭</Text>
</TouchableOpacity>
);
}
父组件
// 接收子组件的回调
render(){
return(
<ChartModal removeModal={(data) => this.closeModal(data)} />
);
} // 根据返回值,触发事件
closeModal(data) {
this.setState({
isChartModal:data
})
}
.
react-native 组件之间传值的更多相关文章
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
- react组件之间传值方式
1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- 4-react 组件之间传值。
1.传值: 都是使用props和state结合得方式进行组件之间得传值 再react中传值得话是父子组件之间得传值,一般会把父组件中得state值通过props传给子组件,再子组件中使用props进行 ...
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
随机推荐
- MyBatis二级缓存的笔记及记录
一.什么是二级缓存: 由于一级缓存是一次性的.临时的:每个会话都会创建一个新的:多个会话之间是不能共享的: 二级缓存用于解决一级缓存的不足:每一个“namespace”都会对应一个二级缓存:执行查询的 ...
- 【学习总结】快速上手Linux玩转典型应用-第5章-远程连接SSH专题
课程目录链接 快速上手Linux玩转典型应用-目录 目录 1. 认识SSH 2. 服务器安装SSH服务 3. 客户端安装SSH工具 4. 客户端链接SSH服务 5. SSH config 6. SSH ...
- jQuery进阶第四天(2019 10.13)
1 初识面向对象(面向对象是一种思维方式) 以前写的代码 var name = '莉莉'; var sex = '女'; var age = 18; var name1 = '小明'; var sex ...
- DRF框架之视图类
前后端分离的项目 >: pip3 install djangorestframework 一.视图类传递参数给序列化类 视图层:views.py 需求: (1)在视图类中实列化对象是,可以设 ...
- Apache 的 php.ini 配置文件详解
[root@taokey ~]# grep -v ";" /application/php/lib/php.ini [PHP] engine = On ——→ 是否启用 PHP ...
- 在Linux环境下部署MySql服务
之前有下载部署过几次,但是每次都会踩一些坑.特此记录在liunx下部署安装mysql的基本步骤: 1.卸载老版本的mysql find / -name mysql|xargs rm -rf 查 ...
- Sql中使用With创建多张临时表
CREATE PROC [dbo].[sp_VisitCount] ( @count INT ) AS BEGIN DECLARE @current DATETIME SET @current=GET ...
- vb中typename函数
适用于获得一个变量的类型名称的, 比如 A 是一个字符串变量,那么 TypeName(A)=String
- Ansbile实战经验
一.相关用法: 1.执行shell 获取web组里得eth0接口信息 ansible web -a "ifconfig eth0" 2.执行ifconfig eth0 命令,ans ...
- fhq_treap || BZOJ1861: [Zjoi2006]Book 书架 || Luogu P2596 [ZJOI2006]书架
题面:P2596 [ZJOI2006]书架 题解:记录每本书对应的节点编号 普通fhq_treap无法查询一个权值的排名,所以在普通fhq_treap上多记录每个节点的父亲(可加在pushup函数中) ...