React Native error: El tipo de elemento no es válido: se espera una cadena o una clase / función pero tiene: object
Hola chicos, pero estoy recibiendo este error y estoy teniendo un montón de problemas para arreglar esto.
Lo que estoy tratando de hacer aquí es tener 3 pantallas diferentes y tener una pestaña que navega a cada pantalla.
- ¿Reaccionar nativo y Android?
- ¿Es posible acceder a las funcionalidades NFC desde una aplicación React
- Reacciona las propiedades de textDecoration nativas que no funcionan en Android
- Reaccionar proceso de fondo nativo
- ¿Puedo crear aplicaciones de Android con reactivos nativos?
aquí está mi índice:
import React, { Component } from 'react'; import { AppRegistry, Navigator, StyleSheet, View, Text } from 'react-native'; import Nav from './app/components/Nav'; import Screen from './app/Screen'; import Tabs from 'react-native-tabs' import SwitchView from './SwitchView'; class Proj extends Component { constructor(props){ super(props); } render(){ var x = "FeedView"; return( <View style={styles.container}> <Tabs selected={x} style={{backgroundColor:'white'}} selectedStyle={{color:'red'}} onSelect={el=> {x = el.props.name}}> <Text name="FeedView">First</Text> <Text name="WikiView" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text> <Text name="BoardView">Third</Text> </Tabs> <SwitchView id={x}/> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }) AppRegistry.registerComponent('Proj', () => Proj);
aquí está mi SwitchView:
import Feed from './app/pages/Feed/Feed'; import Board from './app/pages/Board'; import Wiki from './app/pages/Wiki'; class SwitchView extends Component { render(){ var { id } = this.props; switch (id) { case "FeedView": return <Feed/> case "WikiView": return <Wiki/> case "BoardView": return <Board/> } } }
- React Native: La personalización de la fuente se hace diferente en Android e iOS
- Escenas anidadas en React Native con React-Native-Router-Flux
- React Native: Cambia la ruta de acceso del archivo de entrada index.android.js a la ruta del archivo personalizado especificado
- Reaccionar Nativo Android: screenPhysicalPixels.width no está definido
- Cambiar textColor de <TextInput /> en ReactNative
- React Native no admite el desarrollo en Windows (todavía)?
- NoClassDefFoundError com.facebook.react.bridge.WritableNativeMap
- Npm WARN [email protected] requiere un par de react @> = 15.4.0 pero no se ha instalado ninguno
Cambie la definición de SwitchView a
export default class SwitchView extends Component...
Modifique su SwitchView a esto:
import Feed from './app/pages/Feed/Feed'; import Board from './app/pages/Board'; import Wiki from './app/pages/Wiki'; export default class SwitchView extends Component { render(){ var { id } = this.props; switch (id) { case "FeedView": return <Feed/> case "WikiView": return <Wiki/> case "BoardView": return <Board/> } } }
Esto es probablemente causado por algunos problemas de exportación / importación de módulo JS en su programa, normalmente por una de las dos razones enumeradas a continuación:
- Olvida exportar o exporta algo incorrectamente
- Importa algo que no existe o importa algo incorrectamente
Me encontré con un error similar, pero en mi caso, no es causada por la export
sino causada por la import
, y he utilizado la declaración de import
incorrectamente para importar algo que no existe en el módulo.
En mi caso, la import
se escribió incorrectamente como:
import { MyComponent } from './MyComponents/MyComponent'
mientras que en realidad debería ser:
import MyComponent from './MyComponents/MyComponent'
Y me volvió loco y me tomó un día entero para resolverlo y espero que esto ahorre varias horas para algunas personas.
¿Cómo es diferente de module.exports = SwitchView?
Para mí module.exports funciona para todos mis archivos js excepto uno.
En mi florero estaba en react-native 0.46.4
y tenía algo como import MainContainer from './app'
donde el directorio de app
tenía un archivo index.js
compartido entre Android e iOS, pero React Native no estaba detectando un index.js
dentro de la app
. Una vez que import MainContainer from './app/index.js'
para import MainContainer from './app/index.js'
funcionó.