React Native 的子组件向父组件传值的简单例子
目前只是找到了一组传值的方法
基本原理是利用RN自带的TouchableOpacity组件中的callbackParent属性来实现
上代码
父组件代码
/**
* @flow
*/
/* @flow */
//只适用于一组图片的轮播效果
/*import {
Image,
StatusBar,
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
ScrollView,
AppRegistry
} from 'react-native';
import React, { Component } from 'react';
import Index from './app/compotent/article/Index.js';
export default class App extends Component {
render() {
return (
);
}
}*/
/**
* Created by mymac on 2017/4/1.
*/
import React, { Component }
from
'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
ListView,
TouchableHighlight,
}
from
'react-native';
import ListViewItem
from
'./ListViewItem_Test.js'
export
default
class
App
extends
Component {
constructor(
props) {
super(props);
//其中提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据
// 即数据是否发生了改变，即在需要重绘界面的时候会进行判断
// 如果之前页面中的改行数据没有发生变化，则不再进行重绘，否则进行重绘
var ds
=
new
ListView.
DataSource({
rowHasChanged: (
r1,
r2)
=> r1
!== r2});
this.state
= {
//然后通过cloneWithRows方法为其传递一个数组
dataSource: ds.
cloneWithRows(this.
getDataArray()),
ImageUrl:[
1,],
};
//将this的指针转移到父组件
this.onChildChanged
= this.onChildChanged.
bind(this);
}
//初始化数组数据
getDataArray () {
var dataArray
= [];
for (
let i
=
0 ; i
<
10 ; i
++) {
dataArray.
push(
'row'
+ i);
}
return dataArray;
}
getImageUrl(){
let array
=this.state.dataSource;
// array.push(newState);
console.
log(array,
'arry');
// this.setState({ duration: data.duration });
}
//子组件向父组件传值需要调用的方法
onChildChanged (
newState) {
alert(newState);
// this.getImageUrl();
let array
=this.state.ImageUrl;
array.
push(newState);
console.
log(array,
'arry');
}
//相当于iOS中的cell，返回一个视图布局
_renderRow (
rowData,
sectionID,
rowID){
return (
<
ListViewItem
rowData
={rowData}
sectionID
={sectionID}
rowID
={rowID}
callbackParent
={this.onChildChanged}/>
);
}
//点击cell触发的方法
selectCellAction(
rowData,
sectionID,
rowID) {
alert(
'rowID:'
+rowID);
}
_renderSeparator(
rowData,
sectionID,
rowID,
highlightRow) {
return(
<
View
style
={{backgroundColor:
'red',height:
1}}>View>
)
}
render() {
return (
<
ListView
style
={{flex:
1}}
dataSource
={this.state.dataSource}
renderRow
={this._renderRow.
bind(this)}
renderSeparator
={this._renderSeparator.
bind(this)}
/>
);
}
}
AppRegistry.
registerComponent(
'App', ()
=> App);
子组件代码
/**
* Created by mymac on 2017/4/5.
*/
import React, { Component }
from
'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
}
from
'react-native';
export
default
class
ListViewItem_Test
extends
Component {
setNativeProps(
nativeProps) {
this.refs._root.
setNativeProps(nativeProps);
}
render() {
const {rowData,sectionID,rowID}
= this.props;
return (
<
TouchableOpacity
ref
=
"_root"
style
={ListViewItem_TestStyle.itemStyle}
onPress
={()
=> {
this.props.
callbackParent(this.props.rowData);
}}>
<
Text>{
'rowdata:'
+this.props.rowData}Text>
<
Text>{
'sectionID:'
+this.props.sectionID}Text>
<
Text>{
'rowID:'
+this.props.rowID}Text>
TouchableOpacity>
);
}
}
let ListViewItem_TestStyle
=
StyleSheet.
create({
itemStyle:{
height:
60,
}
})