时间戳

首页 > 解决方案 > 导入某些组件模块时反应本机应用程序崩溃

ios - 导入某些组件模块时反应本机应用程序崩溃

问题描述

我的 index.ts 文件如下所示：

import StaffMembers from './StaffMembers';
import GuestMembers from './GuestMembers';
export {
  StaffMembers,
  GuestMembers,
};

我的文件夹结构看起来像 在此处输入图像描述

这是我的 StaffMembers.tsx 文件：

import React from 'react';
import { AppDivider, CustomLabel } from '.';
import { View } from 'react-native-animatable';
import styles from '../styles';
import { Dropdown, TextInput, Label } from '../../../../components';

const StaffMembers: React.FC<{
  member: string;
  organisation: string;
  orgLabel: string;
  canDelete: () => void;
  errors: any;
  onDelete: () => void;
  onValueUpdate: (updated: any) => void;
  options: any[];
  onDropdownStateChange: () => void;
  zIndex: number;
  onBlur: (fieldName: string) => void;
}> = ({
  member,
  organisation,
  orgLabel,
  canDelete,
  errors = {},
  onDelete = () => {},
  onValueUpdate = () => {},
  options = [],
  zIndex = 1,
  onBlur = () => console.log(),
}) => {
  return (
    <View style={[styles.listItem, { zIndex }]}>
      <View style={{ flex: 1 }}>
        <Dropdown
          label={
            canDelete ? (
              <CustomLabel
                title={<Label title='Staff Member' required />}
                onDelete={onDelete}
              />
            ) : (
              'Staff Member'
            )
          }
          data={options}
          onSelectItem={item => onValueUpdate({ member: item.value, ...item })}
          errorMessage={errors.member}
          value={member}
          onBlur={() => onBlur('member')}
          required
        />
      </View>

      <View style={{ flex: 1 }}>
        <TextInput
          disabled={true}
          label={'Employee ID'}
          value={organisation}
          errorMessage={errors.organisation}
          onChangeText={(val: string) => onValueUpdate({ organisation: val })}
        />
      </View>
      <AppDivider />
    </View>
  );
};

export default StaffMembers;

我将组件导入为

import { StaffMembers, GuestMembers } from '../request/components';

但是，当我的应用程序屏幕需要加载组件时，它会崩溃并出现以下错误：加载组件时应用程序崩溃时出错

当我编辑组件的文件并再次保存时，该应用程序运行良好。

导入组件时有什么遗漏吗？或者是其他东西？

标签： iostypescriptreact-native

解决方案

错误清楚地表明您没有导出组件/屏幕，您正在导入作为模块的 StaffMembers、GuestMembers，而不是嵌套在文件中的类或组件，解决此问题：index.js在 ../request 的根目录中创建文件/components 和内部index.js文件：从 './StaffMembers' 导入 StaffMembers；从'./GuestMembers'导入GuestMembers；

导出 { StaffMembers, GuestMembers };

现在您可以根据需要轻松导入模块。

推荐阅读