如何使用ref Connect

Question

我正在尝试调用组件中的方法。在更多详细信息中，此组件显示一个垂直页面刀片，我需要一个按钮"转到下一个幻灯片"。我正在尝试使用ref，但我会收到错误this.refs.verticalViewPager is undefined。我尝试打印this.refs，它是不确定的。

class App extends Component {
  nextPage() {
        this.refs.verticalViewPager.nextPage()
    }
  render () {
    return (<VerticalViewPager ref="verticalViewPager">
     <View>
      <Text>slide one</Text>
      <Button title={"click to go to the next slide"}  onPress={this.nextPage}  />
    </View>
    <View>
      <Text>slide two</Text>
    </View>
</VerticalViewPager>)
  }
}

https://github.com/gy-chen/react_native_vertical_view_pager

Answer 1

尝试使用函数代替字符串，这可能是因为您不使用箭头函数或绑定NextPage方法：

class App extends Component {
  nextPage = () => {
        this._verticalViewPager.nextPage()
    }
  render () {
    return (<VerticalViewPager ref={component => this._verticalViewPager = component}>
     <View>
      <Text>slide one</Text>
      <Button title={"click to go to the next slide"}  onPress={this.nextPage}  />
    </View>
    <View>
      <Text>slide two</Text>
    </View>
</VerticalViewPager>)
  }
}