React Native导入Class类组件报View config getter callback错误如何解决

不需要将Class类组件改为函数组件，报错和组件写法类型无关，是代码存在三处可直接修复的问题导致：

• 组件命名不符合规范：React自定义组件首字母必须大写，你当前类名menuLateral首字母小写，会被React识别为原生内置标签，触发配置不匹配报错
• 缺少Icon组件的导入声明：代码多处使用Icon组件，但头部导入语句未引入该组件
• Class组件缺少必填的render()方法：React Class类组件必须包含render()方法返回最终要渲染的JSX内容，你目前只定义了两个子渲染方法，没有整合输出

修复后的完整代码 #

import React from 'react';
import { StyleSheet, Dimensions, ScrollView } from 'react-native';
// 导入Icon组件
import { Button, Block, Text, Input, theme, Icon } from 'galio-framework';

const { width } = Dimensions.get('screen');

// 组件名首字母大写
export default class MenuLateral extends React.Component {
  renderSearch = () => {
    const { navigation } = this.props;
    const iconCamera = <Icon size={16} color={theme.COLORS.MUTED} name="zoom-in" family="material" />

    return (
      <Input
        right
        color="black"
        style={styles.search}
        iconContent={iconCamera}
        placeholder="What are you looking for?"
        onFocus={() => navigation.navigate('Pro')}
      />
    )
  }
  
  renderTabs = () => {
    const { navigation } = this.props;

    return (
      <Block row style={styles.tabs}>
        <Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
          <Block row middle>
            <Icon name="grid" family="feather" style={{ paddingRight: 8 }} />
            <Text size={16} style={styles.tabTitle}>Categories</Text>
          </Block>
        </Button>
        <Button shadowless style={styles.tab} onPress={() => navigation.navigate('Pro')}>
          <Block row middle>
            <Icon size={16} name="camera-18" family="GalioExtra" style={{ paddingRight: 8 }} />
            <Text size={16} style={styles.tabTitle}>Best Deals</Text>
          </Block>
        </Button>
      </Block>
    )
  }

  // 新增必填的render方法
  render() {
    return (
      <ScrollView style={styles.home} showsVerticalScrollIndicator={false}>
        {this.renderSearch()}
        {this.renderTabs()}
        {/* 你后续可以继续添加其他要渲染的内容 */}
      </ScrollView>
    )
  }

}

const styles = StyleSheet.create({
  home: {
    width: width,    
  },
  search: {
    height: 48,
    width: width - 32,
    marginHorizontal: 16,
    borderWidth: 1,
    borderRadius: 3,
  },

  tabs: {
    marginBottom: 24,
    marginTop: 10,
    elevation: 4,
  },
  tab: {
    backgroundColor: theme.COLORS.TRANSPARENT,
    width: width * 0.50,
    borderRadius: 0,
    borderWidth: 0,
    height: 24,
    elevation: 0,
  },
  tabTitle: {
    lineHeight: 19,
    fontWeight: '300'
  },
  divider: {
    borderRightWidth: 0.3,
    borderRightColor: theme.COLORS.MUTED,
  },

})

后续验证操作 #

修复完成后执行以下操作避免缓存影响：

• 关闭当前Metro服务，执行npx react-native start --reset-cache重启服务
• 其他页面导入组件时使用大写的组件名：import MenuLateral from './你的组件文件路径'

内容的提问来源于stack exchange，提问作者Cleiton Rasta