javascript - 运行反应原生项目时未定义不是函数（评估't.createContext（！1）'）

Question

我编写了一个移动应用程序，通过使用 react-native 从用户那里收集一些数据。它使用react native 0.57.4, react 16.2.0, react-redux 5.0.5, prop-types 15.5.10,, react-navigation 1.0.0-beta.11. 我还使用这个库在 web 视图中创建调查问题，即基本上嵌套一个包含 SurveyJS 调查的 web 视图在 React Native 应用程序中。
Package.JSON

{
  "name": "SurveyJSInWebViewWithReactAndReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "lodash": "^4.17.11",
    "moment": "^2.20.1",
    "prop-types": "15.5.10",
    "react": "16.2.0",
    "react-native": "^0.57.4",
    "react-native-webview-bridge": "git+https://github.com/abolger/react-native-webview-bridge.git",
    "react-navigation": "1.0.0-beta.11",
    "react-redux": "5.0.5",
    "redux": "3.7.1"
  },
  "devDependencies": {
    "babel-jest": "22.1.0",
    "babel-preset-react-native": "5.0.2",
    "jest": "22.1.2",
    "native-base": "^2.8.1",
    "react-test-renderer": "16.2.0"
  },
  "jest": {
    "preset": "react-native"
  }
}  

app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import surveys from './survey/default_surveys';
import Survey from './survey';


const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

  onSurveyCompleted(ownProps, nextProps) {
    //TODO: Readers hooks go here.
    alert("Nested Survey was completed!");
  }


  render() {
    return (
        <Survey
        surveyJSON={surveys.example3PagePatientSatisfactionSurvey}
        title="My Custom Survey Title"
        navigation={this.props.navigation}
        surveyResponseDateString={''}
        onSurveyComplete={this.onSurveyCompleted}
        data={{}}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

当我尝试使用在移动设备中运行此代码时react-native run-android，出现以下错误。我该如何解决？

标签： javascriptreactjsreact-native

Answer 1

唯一缺少的是与上下文绑定，否则我看不出您的代码有任何问题。您可以尝试将 onSurveyCompleted 函数与您的上下文绑定。这应该适合你

onSurveyComplete={this.onSurveyCompleted.bind(this)}

要么您必须在构造函数中绑定方法，要么在渲染中使用该方法。

constructor(){
   this.onSurveyCompleted = this.onSurveyCompleted.bind(this);
}