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

.