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

我是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

回答(2)

2 years ago

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

导出const时会使用花括号,但是当您导出默认值时,那么当您从该文件导入而没有花括号时,无论您在导入中调用它,都始终导入默认值 . 所以你可以做 import AnyNameYouWant from "./src/components/button" 然后在你的应用程序中使用 <AnyNameYouWant />

2 years ago

虽然答案已被接受 . 我想让你明白一些事情 . 你需要在这里理解两件事

  • 导出默认类

  • 出口类

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

import component from ‘./Component’;

当您使用没有默认值的导出类时,可以像下面那样导入

import {component, component1} from ‘./Component’;