React Native-如何從其父項調用子視圖的函數？

我是新的反應本地和來解決這個問題。我有tabview.js文件中的2個選項卡和tab1.js和tab2.js tab1和tab2的選項卡視圖。所以當頁面加載這兩個選項卡時，componentDidMount函數會調用從Web獲取數據的loadData函數。現在我想在更改標籤頁時刷新數據。但是我怎樣才能在tabview.js中調用tab1.js的loadData函數？React Native-如何從其父項調用子視圖的函數？

下面是我使用

tabview.js

render() { 
return (
    <View style={{flex: 1}}> 
    <Header style={{flex: 1}} /> 
    <ScrollableTabView style={{flex: 10}} onChangeTab={(e)=>{this.checkTabPosition(e)}}> 
    <Tab1 tabLabel="Tab1" navigator={this.props.navigator}/> 
    <Tab2 tabLabel="Tab2" navigator={this.props.navigator} /> 
    </ScrollableTabView> 
    </View> 
); 
}

tab1.js

render() { 
    return (
     <ScrollView refreshControl={ 
        <RefreshControl 
         refreshing={this.state.refreshing} 
         onRefresh={this._onRefresh.bind(this)} 
        /> 
       } 
       > 
     <View> 
      <ListView style={styles.listview} 
       dataSource={this.state.dataSource} 
       renderRow={(rowData) => <ListItem rowData={rowData} navigator={this.props.navigator} />} 
       enableEmptySections={true} 
      /> 
     </View> 
     </ScrollView> 
    ); 
} 

componentDidMount(){ 
    this.fetchData(); 
}

在tab2.js

來源

2016-09-19 Soujanya Barman

您必須將ref添加到您的選項卡，然後使用this.refs。您的代碼將如下所示：

checkTabPosition(e){ 
    // determine which tab to refresh 
    var tabToRefresh = ...; 

    // refresh tab 
    refreshTab(tabToRefresh); 
} 

refreshTab(tab){ 
    this.refs[tab].fetchData(); 
} 

render() { 
return (
    <View style={{flex: 1}}> 
     <Header style={{flex: 1}} /> 
     <ScrollableTabView style={{flex: 10}} onChangeTab={(e)=> {this.checkTabPosition(e)}}> 
      <Tab1 ref="tab1" tabLabel="Tab1" navigator={this.props.navigator}/> 
      <Tab2 ref="tab2" tabLabel="Tab2" navigator={this.props.navigator} /> 
     </ScrollableTabView> 
    </View> 
); 
}

來源

2016-09-19 14:23:31 leo7r

感謝它爲我工作。 :) –

這是props地獄問題相同的號碼; ）。這就是爲什麼在React中，建議儘可能使狀態高於層次結構，或者使用一些狀態管理庫：（Flux，Redux等）。

對於您的情況，您應該將標籤數據移到您的父組件TabView。然後，你可以這樣做：

<Tab1 data={this.state.yourTab1Data} ... /> 
<Tab2 data={this.state.yourTab2Data} ... />

最後，您onChangeTab應調用您的刷新過程（可能是讀取數據），當數據被提取，你會在你的TabView組件使用setState和重新渲染將導致data道具將傳遞到Tab1和Tab2，所以你會有你在找什麼。

基本上你需要從頂部到底部工作。由於傳遞迴調是痛苦的，所以你可能想要使用狀態管理庫，當然這是完全可選的。

來源

2016-09-19 10:50:21

是的，我將使用Redux。 –

React Native-如何從其父項調用子視圖的函數？

回答

相關問題