Reactネイティブ未定義は関数エラーではありません

Question

私はネイティブに反応するのが初めてですこれは初めてネイティブに反応する私の最初の試みですコードの基本的な理解のためのサンプルチュートリアルを続けていました。私はこの問題に直面しています最初のナビゲーションの例を実装する：

undefined is not a function (evaluating 'this.props.renderScene(route,this)') 

私はここでアプリ

を実行するために使用しています私のAndroidデバイス（サムスンJ7）で

は私のindex.android.js

'use strict'; 
var React = require('react'); 
var ReactNative = require('react-native'); 
var SearchPage = require('./SearchPage'); 
var styles = ReactNative.StyleSheet.create({ 
     text: { 
     color: 'black', 
     backgroundColor: 'white', 
     fontSize: 30, 
     margin: 80 
     }, 
     container: { 
     flex: 1 
     } 
    }); 



class PropertyFinderApp extends React.Component { 

    render() { 
    return (

     <ReactNative.Navigator 
     style={styles.container} 
     renderScene={this.renderScene} 
     initialRoute={{ 
     component: SearchPage, 
     index:0, 
     title:"home" 
     }}/> 
    ); 
    } 

} 
ReactNative.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });` 

です

とSearchPage.jsは（私が使用しています他のコンポーネント）ファイル：

'use strict'; 

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    TextInput, 
    View, 
    TouchableHighlight, 
    ActivityIndicator, 
    Image 
} from 'react-native'; 

var styles = StyleSheet.create({ 
    description: { 
     marginBottom: 20, 
     fontSize: 18, 
     textAlign: 'center', 
     color: '#656565' 
    }, 
    container: { 
     padding: 30, 
     marginTop: 65, 
     alignItems: 'center' 
    }, 
    flowRight: { 
     flexDirection: 'row', 
     alignItems: 'center', 
     alignSelf: 'stretch' 
    }, 
    buttonText: { 
     fontSize: 18, 
     color: 'white', 
     alignSelf: 'center' 
    }, 
    button: { 
     height: 36, 
     flex: 1, 
     flexDirection: 'row', 
     backgroundColor: '#48BBEC', 
     borderColor: '#48BBEC', 
     borderWidth: 1, 
     borderRadius: 8, 
     marginBottom: 10, 
     alignSelf: 'stretch', 
     justifyContent: 'center' 
    }, 
    searchInput: { 
     height: 36, 
     padding: 4, 
     marginRight: 5, 
     flex: 4, 
     fontSize: 18, 
     borderWidth: 1, 
     borderColor: '#48BBEC', 
     borderRadius: 8, 
     color: '#48BBEC' 
    } 
}); 

export default class SearchPage extends Component { 

    render() { 
     return (
      <View style={styles.container}> 
      <Text style={styles.description}> 
      Search for houses to buy! 
      </Text> 
      <Text style={styles.description}> 
      Search by place-name, postcode or search near your location. 
      </Text> 
      <View style={styles.flowRight}> 
      <TextInput 
      style={styles.searchInput} 
      placeholder='Search via name or postcode'/> 
      <TouchableHighlight style={styles.button} 
      underlayColor='#99d9f4'> 
      <Text style={styles.buttonText}>Go</Text> 
      </TouchableHighlight> 
      </View> 
      <TouchableHighlight style={styles.button} 
      underlayColor='#99d9f4'> 
      <Text style={styles.buttonText}>Location</Text> 
      </TouchableHighlight> 
      </View> 
      ); 
    } 
} 

module.exports = SearchPage; 

私は、私はこの中で初心者ですので、任意の助けが理解されるであろうでありがとうを私が間違っているの何見当がつかない前進。 GOT、次の例を参照してください、renderScene関数を記述するための

Answer 1

あなたは：

<ReactNative.Navigator 
    ... 
    renderScene={this.renderScene.bind(this)} /> 


renderScene(route, navigationOperations, onComponentRef) { 
    switch(route.index) { 
    case 0: 
     return <SearchPage /> 
    } 
}