Question

我是反应原生的新手并且遇到了这个问题。我有一个标签视图，tabview.js文件中包含2个标签，tab1和tab2标签为tab1.js和tab2.js。因此，当页面加载两个选项卡时，componentDidMount函数调用loadData函数，该函数从web获取数据。现在我想在更改标签时刷新数据。但是如何在tabview.js中调用tab1.js的loadData函数？

以下是我正在使用的代码

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

Answer 1

这是props地狱问题;）。这就是为什么在React中，建议让你的状态尽可能高，或者使用一些状态管理库:( Flux，Redux等）。

在您的情况下，您应该将标签数据移动到父组件TabView。然后你可以这样做：

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

最后，您的onChangeTab应该调用您的刷新过程（可能是获取数据），在获取该数据时，您将在setState组件中使用TabView并重新呈现导致data道具传递给Tab1和Tab2，以便您拥有所需的内容。

基本上你需要从上到下工作。由于传递回调很痛苦，这就是为什么你可能想要使用状态管理库，当然，它完全是可选的。

Answer 2

您必须在标签中添加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>
 );
}

React Native-如何从其父级调用子视图的函数？

2 个答案: