Question

我是React Native的新手，我目前正在尝试创建一个名为OpButton的自定义组件。这只是一个按钮，因此我可以尝试导入和导出组件。但是，每次我尝试导入它时，都会不断出现诸如“不变违反”之类的错误，而且我也不知道如何解决它。

import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
export default class OpButton extends Component {
  render() {
    return (
      <Button
       onPress={() => Alert.alert("Hello World")}
       title= "Hello World"
       color="#841584"
       accessibilityLabel="Learn more about this purple button"
      />
   );
 }
}

我的button.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { OpButton } from "./src/components/button";
 export default class App extends Component {
  render() {
   return (
    <OpButton></OpButton>
  );
 }
}

我的App.js

Answer 1

尝试import OpButton from "./src/components/button"

在导出const时使用大括号，但是在导出默认值时，然后从不带大括号的文件导入时，无论导入时使用什么名称，都始终导入默认值。因此，您可以进行import AnyNameYouWant from "./src/components/button"，然后在您的应用中使用<AnyNameYouWant />

Answer 2

尽管答案已经被接受。我想在一些事情上让你明白。您需要在这里了解两件事

导出默认类
出口舱

使用导出默认类时，这意味着默认情况下将导出组件，您可以像下面那样导入

ls()

在不使用默认导出类的情况下，可以像下面这样导入

  import component from ‘./Component’;

React Native，无法导入自定义组件

2 个答案: