react-native - 如何从主题文件夹中导入可重用组件？

Question

我想从主题文件夹中导入一个可重用的 Button 组件。

这是Button组件的路径：

\app\theme\components\Button.ts

这是Button.ts的代码

import { typography } from "theme/typography";
import { ButtonProps } from "react-native-elements";

export const Button = {
titleStyle: {
    fontSize: typography.size,
    fontFamily: typography.primaryMedium,
    lineHeight: typography.size,
    letterSpacing: 0,
    marginHorizontal: typography.size
},
containerStyle: {
    borderRadius: typography.size * 2 + typography.size * 2
},
buttonStyle: {
    borderRadius: typography.size * 2 + typography.size
}
} as ButtonProps

这是我要导入的组件：organizationdetails-screen.tsx。

它的路径是\app\screens\superadmin-screens\organizationdetails-screen.tsx。

我正在尝试像这样导入按钮

import { Button } from '../../theme/components/Button';

但是我收到了这个错误

我正在使用这样的按钮：

<Button
     title="Add User"
     onPress={() => this.props.navigation.navigate('AddNewUser')}
/>

当我将鼠标悬停在 Visual Studio Code 中的按钮上时，它会显示以下错误：

如何导入这个可重复使用的按钮？

Answer 1

您似乎只在\app\theme\components\Button.ts 中定义了按钮道具，并试图将它们用作组件。这行不通。

在你的 '\app\theme\components\Button.tsx' 中试试这个：

import { StyleSheet } from 'react-native';
import { Button as RNButton, ButtonProps } from 'react-native-elements`;
import { typography } from "theme/typography";


const styles = StyleSheet.create({
  titleStyle: {
    fontSize: typography.size,
    fontFamily: typography.primaryMedium,
    lineHeight: typography.size,
    letterSpacing: 0,
    marginHorizontal: typography.size
  },
  containerStyle: {
    borderRadius: typography.size * 2 + typography.size * 2
  },
  buttonStyle: {
    borderRadius: typography.size * 2 + typography.size
  }
});


export const Button = (props: ButtonProps) => (
 <RNButton
  titleStyle={styles.titleStyle}
  containerStyle={styles.containerStyle},
  buttonStyle={styles.buttonStyle}
  {...props}
);