Estoy aprendiendo a reaccionar de forma nativa, y me encontré con este problema, estoy tratando de exportar una clase a otra pantalla, pero aparece "Ver la devolución de llamada del captador de configuración para el componente ... debe ser una función", si alguien puede ayudarme. Estaré extremadamente agradecido, imprimiré el código a continuación. ¿Debo cambiar la clase de una función? ¿Hay alguna otra forma de exportar este código como una clase?
import React from 'react'; import { StyleSheet, Dimensions, ScrollView } from 'react-native'; import { Button, Block, Text, Input, theme } 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> ) } } 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, }, })Los componentes de React deben comenzar con una letra mayúscula, por lo que ese es el primer problema. El segundo problema es que los componentes de reacción necesitan una función de renderizado.