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(<CommunalCellname={rowData.name}gender={rowData.gender}/>);
}

3.通过回调方法传值（子组件向父组件传值）

子组件

// 提供参数出去,便于外部调用
static defaultProps = {removeModal:{}
}// 定义方法,便于组件触发
popToHome(data) {// 向外部传值(向父组件传值)this.props.removeModal(data);
}// 返回右边按钮
renderRightItem() {return(<TouchableOpacityonPress={() => {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兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
beeshell —— 开源的 React Native 组件库
背景 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
Vue2 组件之间传值
组件件的传值有点复杂,我在这里记录一下哈 Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个 ...
vue2组件之间传值（数据共享）
目录 1.父组件向子组件传值 2.子组件向父组件传值: 3.子组件之间传值: 子组件之间传值第一种方法: 子组件之间传值第二种方法: 1.父组件向子组件传值自定义属性(:属性名.props) ① ...
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
React Native组件的结构和生命周期
React Native组件的结构和生命周期一.组件的结构 1.导入引用可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
React Native组件（四）TextInput组件解析
相关文章 React Native探索系列 React Native组件系列 1 概述 TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文 ...
vue 2 组件之间传值
对vue2版本的组件之间传值的一个简单整合: 父组件 => 子组件: props 和 refs - props: { msg: String } //parent <hello-world ...

react-native 组件之间传值

react-native 组件之间传值相关推荐

最新文章

热门文章