React Native Button导致Invariant Invalid

Question

对于我的一生，我无法弄清楚为什么这点代码不起作用！

我已将问题隔离到 Button 元素（导入语句似乎很好）。

我看到错误“Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for complex components) but got: undefined. 检查 Login 的渲染方法。

 import React, { ScrollView, Image, StyleSheet, Button } from "react- 
 native";
 import { connect } from "react-redux/native";

 const onButtonClicked = () => {};

class Login extends React.Component {
componentDidMount() {}

render() {
    return (
        <ScrollView
            style={{ flex: 1 }}
            contentContainerStyle={{
                justifyContent: "center",
                alignItems: "center"
            }}
        >
            <Image
                source={require("../../img/coin.png")}
                resizeMode={Image.resizeMode.cover}
                style={Styles.coinLogo}
            />

            <Button title="Login default" onPress={() => {}} />
        </ScrollView>
      );
   }
}

Login.propTypes = {
  dispatch: React.PropTypes.func
};

Login.defaultProps = {
   dispatch: () => {}
};

const Styles = StyleSheet.create({
   coinLogo: {
     marginTop: 50,
     height: 200,
     width: 200
},
loginButton: {
    marginTop: 50
}
});

export default connect(state => ({}))(Login);

Answer 1

这是一个令人讨厌的问题，因为错误消息非常模糊。它必须（我认为）与对象解构有关。

当你解构一个对象时，说：

var myObject = {a: 1, b: 2, c: 3};

let {a, b, c, d} = myObject;

您的转译器执行以下操作：

 let a = myObject.a;
 let b = myObject.b;
 let c = myObject.c;
 let d = myObject.d; // Ah! But we never defined a 'd' key, did we?

当然，不存在的键评估为 undefined 而不会引发错误，所以你得到的是 d 的值为 undefined。

让我们回到您的导入。我认为它们应该是这样的：

import React from 'react'; // The React API moved to the react package, you should be getting an error because of this. See https://github.com/facebook/react-native/releases/tag/v0.26.0 (Unless you are using React Native <= 0.25)
import { ScrollView, Image, StyleSheet, Button } from "react-native";
import { connect } from "react-redux"; // As far as I know, the connect is exported directly from 'react-redux', but it might be OK the way you had it.

现在，让我们转到您的render。我们正在尝试渲染ScrollView、Image 和Button。 RN 提出错误是因为其中一个正在评估为undefined，这是不允许的，但它没有告诉我们是哪一个。您可以尝试console.log 这三个的值并检查哪个未定义。但是，我强烈认为它是Button，因为它是在RN 0.37 中添加的，正如我之前在React 的导入中提到的，您必须运行0.26.0 标签之前的RN 版本，否则代码会引发不同的错误。

如果是这样，请告诉我。