Touchable类型的组件的子组件为复合类型时出现的错误解决

先上代码

//渲染方法
renderRow(rowData,sectionID,rowID,highlightRow) {
return (
<TouchableHighlight
onPress={() => {
this._rowPressed(sectionID, rowID);
}
}
style={{}}
underlayColor='red'>
<IndexListViewItem rowData={rowData} sectionID={sectionID} rowID={rowID}/>
</TouchableHighlight>

);
}

//IndexListViewItem自定义组件
'use strict';

import React, { Component } from 'react';

import {
StyleSheet,
View,
Text,
} from 'react-native';

class IndexListViewItem extends Component {
render() {
return (
<View style={{flexDirection: 'row',justifyContent: 'center',backgroundColor: '#F6F6F6',}}>
<Text  style={{fontSize: 18}}>
{this.props.rowData}
</Text>
</View>
);
}
}

const styles = StyleSheet.create({

});

export default IndexListViewItem;

这里直接运行会报错：touchable child must either be native or forward setnativeprops to a native component。

1、在子组件内部添加如下代码

setNativeProps(nativeProps) {
this._root.setNativeProps(nativeProps);
}

2、在子组件内部的第一个子原生组件中添加如下属性

ref={component => this._root = component}

3、如果Touchable类型是TouchableOpacity,还需要在子组件内部添加如下代码，用来传递props

{...this.props} //新语法，相当于取出所有的props

PS、为什么要添加第三条还没搞太明白，希望有高手能指教一下