时间戳

首页 > 解决方案 > React Native，无法导入自定义组件

react-native - 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

标签： react-native

解决方案

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

当您要从中导入的文件将变量导出为 const ( export const OpButton . . .) 时，在导入时使用花括号，但是当您export default OpButton从该文件中导入时没有花括号时，无论您使用什么，您始终会导入默认值在您的导入中调用它。所以你可以做import AnyNameYouWant from "./src/components/button"然后<AnyNameYouWant />在你的App.js

推荐阅读