如何使用react-native-scrollable-tab-view切換另一個組件的標籤

Question

第二天使用React Native，所以我不知道我在做什麼，但是如何從另一個組件中切換標籤，本機可滾動製表看法？

https://github.com/skv-headless/react-native-scrollable-tab-view

我有一個菜單按鈕在ButtonPage，我試圖切換標籤與使用onPress。然而，當我點擊它，我得到：

undefined is not an object (evaluating 'this.props.tabView.goToPage') 

我所得到的是這種

export default class Home extends Component { 
 
    render() { 
 
    return (
 
     <View style={{flex: 1}}> 
 
     <StatusBar 
 
     barStyle='light-content'/> 
 
     <ScrollableTabView initialPage={1} renderTabBar={false} 
 
     ref={(tabView) => { this.tabView = tabView}}> 
 
      <FriendsPage tabView={this.tabView} tabLabel="Friends" /> 
 
      <ButtonPage tabView={this.tabView} tabLabel="Button" /> 
 
      <HangoutsPage tabView={this.tabView} tabLabel="Hangouts" /> 
 
     </ScrollableTabView> 
 
     </View> 
 
    ) 
 
    } 
 
}

在我ButtonPage我有這個

export default class ButtonPage extends Component { 
 
    render() { 
 
     return (
 
     <View style={styles.container}> 
 

 
      <View style={styles.buttonsContainer}> 
 
       <HangoutsButton/> 
 
       <View style={styles.spacer}/> 
 
       <MenuButton/> 
 
      </View> 
 

 
     </View>) 
 
    } 
 
}

這菜單按鈕被該

export default class MenuButton extends Component { 
 
    constructor(props) { 
 
     super(props) 
 
     this.goToPage = this.goToPage.bind(this) 
 
    } 
 
    goToPage(pageNumber) { 
 
     this.props.tabView.goToPage(pageNumber) 
 
    } 
 
    render() { 
 
     return (
 
      <Indicator 
 
       position='left top' 
 
       value='3' 
 
       type='warning'> 
 
       <TouchableHighlight 
 
       onPress={() => this.goToPage(0)} 
 
       underlayColor='#ed8600' 
 
       style={styles.touchable}> 
 
        <Image source={require('./resources/menuicon.png')} style={styles.image} /> 
 
       </TouchableHighlight> 
 
      </Indicator> 
 
     ) 
 
    } 
 
}

如何獲得參考我scrollableTabView一路下跌到我的按鈕說明，以便我可以點擊它，並改變與頁轉到頁面？

我認爲你可以將對象粘在一個道具上，並將該道具一直向下傳遞，然後使用MenuButton上的函數goToPage。

Answer 1

你不需要tabview一路下來。只需使用

export default class MenuButton extends Component { 

render() { 
    return (
     <Indicator 
      position='left top' 
      value='3' 
      type='warning'> 
      <TouchableHighlight 
      onPress={() => this.props.onPress && this.props.onPress()} 
      underlayColor='#ed8600' 
      style={styles.touchable}> 
       <Image source={require('./resources/menuicon.png')} style={styles.image} /> 
      </TouchableHighlight> 
     </Indicator> 
    ) 
}} 

export default class ButtonPage extends Component { 
render() { 
    return (
    <View style={styles.container}> 

     <View style={styles.buttonsContainer}> 
      <HangoutsButton/> 
      <View style={styles.spacer}/> 
      <MenuButton onPress={() => this.props.goToPage && this.props.goToPage() }/> 
     </View> 

    </View>) 
}} 

最後

export default class Home extends Component { 
    goToPage(pageId) { 
    this.tabView.goToPage(pageId); 
    } 
    render() { 
    return (
     <View style={{flex: 1}}> 
     <StatusBar 
     barStyle='light-content'/> 
     <ScrollableTabView initialPage={1} renderTabBar={false} 
     ref={(tabView) => { this.tabView = tabView}}> 
      <FriendsPage tabView={this.tabView} tabLabel="Friends" /> 
      <ButtonPage tabView={this.tabView} tabLabel="Button" goToPage={() => this.goToPage(1) } /> 
      <HangoutsPage tabView={this.tabView} tabLabel="Hangouts" /> 
     </ScrollableTabView> 
     </View> 
    ) 
    } 
}