React Native undefined不是函數錯誤

Question

我是新來的反應原生這是我第一次嘗試反應本機我是遵循一個示例教程的基本理解的代碼和其他東西我遵循這個raywenderlich's propertyfinder示例，同時實施第一導航比如我現在面臨這個問題：

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; 

我不知道我做錯了，因爲我在這一個初學者的任何幫助將不勝感激，感謝名單中提前。

Answer 1

您的GOT寫renderScene功能，看下面的例子：

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


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