Как импортировать повторно используемый компонент из папки темы в реагировать родной?

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 появляется эта ошибка:

Как импортировать эту многоразовую кнопку?

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}
);