如何使用react-native-scrollable-tab-view从其他组件切换选项卡

Question

第二天使用React Native,所以我不知道我在做什么,但是如何使用react-native-scrollable-tab-view从另一个组件中切换标签？

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

我在ButtonPage中有一个MenuButton,我正在尝试使用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>)
    }
}

这个MenuButton就是这样描述的

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的引用一直到我的按钮,这样我可以点击它并用goToPage更改页面？

我假设您可以将对象粘贴在道具中并将该道具一直向下传递,然后使用MenuButton上的函数goToPage.

Answer 1

您不需要一直查看参考.只是用

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>
    )
  }
}