如何使用React Native觸發組件中的tabItem onPress？

Question

好吧，我放棄了。這一定是如此基本，沒有人記錄在任何地方。

我有3個基本組件，所有這些組件都可以從基本的3個Tab項中點擊。

如何模擬用戶單擊其中一個選項卡項目？例如，假裝component1有一個動作 - 成功時 - 將用戶引導到component2（就好像他們從tabitem中點擊它一樣）

我可以提供一些代碼，否則只是假設我有一個基本的教程應用程序。我覺得我正在尋找的東西本質上是一個超鏈接。

Answer 1

您應該將反應組件看作一棵樹，並且您可以將您想要觸發的功能從父母傳遞給兒童作爲道具。

假設你有一個標籤組件 -

const Tab = React.createClass({ 

    onPressButton(){ 
    triggeredFunction(); 
    }, 

    render() { 
    return (
     <Button onPress={this.onPressButton}> 
     <Text>Press Me!</Text> 
     </Button> 
    ); 
    }, 

}); 

你可以簡單地調用triggeredFunction()（或this.onPressButton從組件內），如果你想模仿的觸感。

如果您正試圖觸發從父組件的功能，你應該有父的觸發功能，並把它作爲道具 -

const Tab = React.createClass({ 

propTypes: { 
    onPressButton: React.PropTypes.func, 
    tabNumber: React.PropTypes.number, 
    tabText: React.PropTypes.string, 
}, 

triggerTheTriggerToTrigger() { 
    // This will trigger the triggeredFunction in the page component and pass in the tab number 
    // Remember that onPressButton={this.triggeredFunction} 
    // So you are calling this.triggeredFunction(tabNumber) in the parent page component 
    this.props.onPressButton(this.props.tabNumber); 
}, 

    render() { 
    return (
     <Button onPress={this.triggerTheTriggerToTrigger}> 
     <Text>{this.props.tabText}</Text> 
     </Button> 
    ); 
    }, 

}); 

然後在你的主要成分

const Page = React.createClass({ 

getInitialState() { 
return { 
    currentTab: 1, 
}; 
}, 

triggeredFunction(tabNum) { 
// This function is setting the state of the page component to be equal to that passed from the tab 
// So when the tab is touched it will trigger the page to change to that number. 
this.setState({ 
    currentTab: tabNum, 
}); 
}, 

// main component render: 
    render() { 

    let content; 

    // We are setting the page 'content' from here 
    // Choosing the content from the currentTab state 
    switch (this.state.currentTab) { 
    case 1: 
    content = <Text>This is the content for tab 1</Text> 
    break 
    case 2: 
    content = <Text>Tab 2 has a slightly different message</Text> 
    break 
    case 3: 
    content = <Text>Tab 3 is slightly different too</Text> 
    break 
    } 

    return (
    <View className="page"> 
    <View className="toptabs"> 
     <Tab onPressButton={this.triggeredFunction} tabText="Button 1" tabNumber={1} /> 
     <Tab onPressButton={this.triggeredFunction} tabText="Button 2" tabNumber={2} /> 
     <Tab onPressButton={this.triggeredFunction} tabText="Button 3" tabNumber={3} /> 
    </View> 
    <View className="pageContent"> 
     {content} 
    </View> 
    </View> 
    ); 
}, 
}); 

然後，您可以改爲從主要組件調用this.triggeredFunction()。我希望這是有道理的。

我沒有測試過這段代碼，因此可能需要做一些調整，但希望它能向您展示它背後的邏輯。

此外，我在這裏使用switch語句來做出明顯的事情。我不會在真實的應用程序中使用這種方法（並不是特別糟糕）。您也可以加載其他組件並根據currentTab狀態有條件地加載它們。您可以創建一系列內容並擁有 - let content = contents[this.state.currentTab];

您也可以通過其他方式實現此目的。我在我的應用中使用助焊劑，其中包含您更新的商店。這些商店然後用數據傳播視圖。這意味着你獲得更多的全球設置。如果你使用的是流量，那麼你基本上會設置流量的頁面狀態（即tabNumber）。

所以，在你的標籤，你可以設置onPressButton到 - this.flux.action.updateTab(this.props.tabNumber); 這將更新全局存儲設置tabNumber你在（即你不只是設置currentTab的頁面組件上了）什麼

而且在你的頁面中，你可以得到你的currentTab狀態 - currentTab: this.flux.store.tabStore.getCurrentTab() 所以當商店更新時，商店會更新你的頁面組件。

但是，這是一個比你使用的更復雜的實現，它超出了我們在這裏討論的範圍。不要擔心，如果這部分是令人困惑的，但考慮它可能會有所幫助，如果你在未來構建更大的東西（想象10個不同的應用程序'頁面'與標籤部分的不同的東西，突然你想要一個存儲位置，你可以控制它們的狀態，而不是在每組組件中）。