Question

我正在尝试使用取自https://github.com/iddan/react-native-canvas的Canvas 但是，在尝试生成时，似乎WebView会创建以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'Canvas'

我附加了包含Canvas的index.ios.js的一个片段。有关WebView生成此错误的原因的任何帮助都将非常有用（如果您删除WebView并且只是离开View，则会有效。）

import React, { PropTypes, Component, WebView } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
  Image,
  TouchableHighlight,
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';
import SignatureCapture from 'react-native-signature-capture';
const Sound = require('react-native-sound');


// TEST
class Canvas extends Component {

  propTypes: {
    context: React.PropTypes.object,
    render: React.PropTypes.func.isRequired
  };

  render() {

    var contextString = JSON.stringify(this.props.context);
    var renderString = this.props.render.toString();

    return (
      <View>
        <WebView
          automaticallyAdjustContentInsets={false}
          contentInset={{top: 0, right: 0, bottom: 0, left: 0}}
          html={'<style>*{margin:0;padding:0;}canvas{position:absolute;transform:translateZ(0);}</style><canvas></canvas><script>var canvas = document.querySelector("canvas");(" + renderString + ").call(" + contextString + ", canvas);</script>'}
          opaque={false}
          underlayColor={'transparent'}
          style={this.props.style}/>
      </View>
    );
  };
};

Answer 1

您使用的是什么版本的RN？在0.42上它表示不推荐使用html prop，因此你必须使用source={html: string, baseUrl: string}。另外我认为它可能无法定义你的一个jsx元素，我认为它可能是

Answer 2

尝试在文件中添加html代码并调用source={{ uri: require('./myfile.html')}}。使用source prop而不是html。 html已弃用。验证文档https://facebook.github.io/react-native/docs/webview.html

React Native WebView生成无效的渲染方法，未定义

2 个答案: