Question

我试图调用一个改变某些东西的功能，这个＆＃34;来自导航器渲染功能。

所以我的render（）函数如下所示：

render() {
return(
  <Navigator
    ref='Navigator'
    initialRoute={{name: 'timetable'}}
    renderScene={this.renderScene.bind(this)}
  />
);
}

这是我的renderScene函数：

renderScene(route, navigator) {
if(route.name === 'timetable') {
  return (
    <View style={{flex: 1}}>
    <Content>
    <ScrollView
      horizontal={true}
      ref='ScrollView'
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      onScroll={this._onScroll.bind(this)}
    >
    <View style={{width: this.state.width}}>
    <Timetable day='Ponedeljek' date='6.3.2017' />
    </View>
    <View style={{width: this.state.width}}>
    <Timetable day='Torek' date='7.3.2017' />
    </View>
    </ScrollView>
    <PageControlIOS
      currentPage={this.state.currentPage}
      numberOfPages={2}
      pageIndicatorTintColor="grey"
      currentPageIndicatorTintColor="#ff3b30"
      style={{margin: -10}}
      onValueChange={this._onPageControlValueChange.bind(this)}
    />
    </Content>
    </View>
  )
}else if (route.name === 'allSubstitutions') {
  return (
    <AllSubstitutions navigator={navigator}/>
  )
}
}

当调用onValueChange函数时会出现问题，如下所示：

_onPageControlValueChange(currentPage) {
this.refs.ScrollView.scrollResponderScrollTo({x: this.state.width * currentPage, y: 0, animated: true})
  }

我得到的错误是＆＃34; undefined不是一个对象（评估＆＃39; this.refs.ScrollView.scrollResponderScrollTo＆＃39;）。

如果我只是用renderScene（）的内容替换render（）函数的内部，它就会按预期工作。

如果您有任何想法，我很想听到解决方案，谢谢。

Answer 1

我认为您在ref组件上定义ScrollView的方式存在问题。尝试做这样的事情：

<ScrollView
  ref={(scrollView) => { this.scrollView = scrollView; }}

然后

_onPageControlValueChange(currentPage) {
    this.scrollView.scrollResponderScrollTo({x: this.state.width * currentPage, y: 0, animated: true})
  }

在函数内部调用函数会使我得到一个未定义的＆＃34;这个＆＃34; in React Native

1 个答案: