javascript - How to switch tabs from another component using react-native-scrollable-tab-view - Stack Overflow

admin管理员组

文章数量:1415139

Second day using React Native so I've no idea what I'm doing, but how do I switch tabs from within another ponent with react-native-scrollable-tab-view?

I have a MenuButton in a ButtonPage that I'm trying to switch tabs with using an onPress. However when I tap it I get:

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

What I've got is this

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

Second day using React Native so I've no idea what I'm doing, but how do I switch tabs from within another ponent with react-native-scrollable-tab-view?

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

I have a MenuButton in a ButtonPage that I'm trying to switch tabs with using an onPress. However when I tap it I get:

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

What I've got is this

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

And in my ButtonPage I have this

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

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

        </View>)
    }
}

And that MenuButton is described by this

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

How do I get the reference for my scrollableTabView all the way down to my button so I can tap it and change the page with goToPage?

I assumed you could stick the object in a prop and pass that prop all the way down and then use the function goToPage on it from MenuButton.

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Mar 12, 2017 at 20:15 ARMATAVARMATAV 64466 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You don't need to tabview ref all the way down. Just use

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

And finally

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

本文标签： javascriptHow to switch tabs from another component using reactnativescrollabletabviewStack Overflow