関数内で関数を呼び出すと、これは未定義の "this"が返されます。

Question

"this"内の何かをナビゲータレンダリング関数内から変更する関数を呼び出そうとしています。

だから私のレンダリング（）関数は次のようになります。

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機能は次のようになりますどの呼び出されたときに問題が起こる：

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

これは私のrenderScene機能であります：

私が得るエラーは「未定義はオブジェクトではありませんs.refs.ScrollView.scrollResponderScrollTo '）。

render（）関数の内容をrenderScene（）の内容に置き換えるだけで、意図したとおりに動作します。

何が起こっているのか分かっていれば、私はこのソリューションをお聞きしたいと思います。

Answer 1

私はこれがあなたのrefをScrollViewコンポーネントで定義した方法に問題があるようです。代わりに、このような何かをやってみてください。

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

、その後

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