在React native 開(kāi)發(fā)中可以很方便的將通用的控件封裝為子組件凯旭，本文主要介紹了父組件和子組件的交互檬输，包含：
（1）父組件傳遞屬性到子組件
（2）父組件調(diào)用子組件的方法
（3）子組件調(diào)用組件中的方法
我們使用一個(gè)小Demo來(lái)說(shuō)明這個(gè)問(wèn)題，Demo的界面如下：
image.png
子組件封裝了一個(gè)FlatList旱眯，父組件中加載了子組件（圖中灰色部分），父組件通過(guò)點(diǎn)擊“調(diào)用子組件方法”按鈕，調(diào)用子組件中的方法痪伦，修改列表中展示的內(nèi)容，子組件選中列表中的某一項(xiàng)后雹锣，調(diào)用父組件的方法网沾，展示到左上角的Text控件中
代碼：
Parent.js
import React,{Component} from 'react'
import{
View,
Text,
StyleSheet,
TouchableOpacity,
SafeAreaView
}from 'react-native'
import Child from './Child'
export default class Parent extends Component{
constructor(props){
super(props)
this.state={
selectedText:'********'
}
}
render(){
return(
<SafeAreaView
style={styles.container}>
<View style={{flexDirection:'row'}}>
<Text style={styles.text}>
{this.state.selectedText}
</Text>
<TouchableOpacity style={styles.btn} onPress={()=>{
this.childList.changeListData()
}}>
<Text>調(diào)用子組件的方法</Text>
</TouchableOpacity>
</View>
<Child ref={(view)=>this.childList=view} listData={['早','中','晚']} _itemSelect={(item)=>{
this._showItemText(item)
}}/>
</SafeAreaView>
)
}
_showItemText(item){
console.log('((((((('+item)
this.setState({
selectedText:item
})
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
},
text:{
margin:80,
marginTop:100,
backgroundColor:'pink',
},
btn:{
margin:80,
marginTop:100,
padding:10,
backgroundColor:'red'
}
})
Child.js
import React,{Component} from 'react'
import {
View,
FlatList,
TouchableOpacity,
StyleSheet,
Text
}from 'react-native'
import PropTypes from 'prop-types'
export default class Child extends Component{
constructor(props){
super(props)
this.state={
listData:this.props.listData
}
}
render(){
return(
<View>
<FlatList data={this.state.listData}
renderItem={this._renderItem}
style={styles.flatList}
keyExtractor={(item, index) => 'time' + index}
getItemLayout={(data, index) => ({
length:40, offset: 40 * index, index
})}
/>
</View>
)
}
_renderItem=({item,index})=>{
return(
<TouchableOpacity style={styles.item}
onPress={()=>{ this.props._itemSelect(item)}}>
<Text style={{fontSize:18, color: '#333333'}}>{item}</Text>
</TouchableOpacity>
)
}
changeListData(){
this.setState({
listData:['起床','工作','睡覺(jué)']
})
}
}
Child.propTypes = {
_itemSelect:PropTypes.func,
listData:PropTypes.array
};
Child.defaultProps = {
_itemSelect:(index)=>{},
listData:['早','中','晚']
};
const styles = StyleSheet.create({
flatList:{
backgroundColor:'#f0f0f0',
},
item:{
paddingHorizontal:24,
height: 40,
justifyContent:'center'
}
})
- 父組件傳遞屬性到子組件
listData={['早','中','晚']} _itemSelect={(item)=>{
this._showItemText(item)
子組件可以設(shè)定屬性的類(lèi)型和默認(rèn)值
Child.propTypes = {
_itemSelect:PropTypes.func,
listData:PropTypes.array
};
Child.defaultProps = {
_itemSelect:(index)=>{},
listData:['早','中','晚']
};
2.父組件調(diào)用子組件的方法
通過(guò)ref指向子組件，在需要的地方調(diào)用子組件中的方法蕊爵。
ref是組件的一種特殊屬性辉哥，可以理解為，組件被渲染后，指向組件的一個(gè)引用醋旦。我們可以通過(guò)ref屬性來(lái)獲取真實(shí)的組件恒水。
ref={(view)=>this.childList=view}
<TouchableOpacity style={styles.btn} onPress={()=>{
this.childList.changeListData()
}}>
<Text>調(diào)用子組件的方法</Text>
</TouchableOpacity>
3.子組件調(diào)用組件中的方法
父組件將回調(diào)方法作為屬性傳遞給子組件，子組件在需要的地方調(diào)用
listData={['早','中','晚']} _itemSelect={(item)=>{
this._showItemText(item)
<TouchableOpacity style={styles.item}
onPress={()=>{ this.props._itemSelect(item)}}>
<Text style={{fontSize:18, color: '#333333'}}>{item}</Text>
</TouchableOpacity>
