React Native undefined不是函数错误

debugcn 发表于 Dev

维沙尔

我是本机新手，这是我在本机中的第一次尝试。我正在跟踪示例教程，以基本了解代码以及跟随raywenderlich的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;

我不知道我在做什么错，因为我是这个方面的初学者，将不胜感激，谢谢。

皮尔·舒卡鲁拉·沙（Pir Shukarullah Shah）

您需要编写renderScene函数，请参见以下示例：

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


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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。