react-native - nodo - obtener el primer hijo de un elemento jquery

Reacción nativa: no se puede agregar un hijo que no tenga un nodo de Yoga o nodo primario

Question

Acabo de empezar a aprender a reaccionar nativo,

He creado un archivo separado flexdemo.js y he creado un componente como se muestra a continuación:

import React, { Component } from ''react'';
import { View } from ''react-native'';

export default class FlexibleViews extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, backgroundColor: "powderblue" }}> </View>
                <View style={{ flex: 2, backgroundColor: "skyblue" }}> </View>
                <View style={{ flex: 3, backgroundColor: "steelblue" }}> </View>
            </View>

        );
    }
}

y el archivo App.js es el siguiente:

import React, { Component } from ''react'';
import {
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View, Image
} from ''react-native'';

// import Bananas from ''./src/banana'';
// import LotsOfStyles from ''./src/styledemo''

import FlexibleViews from ''./src/flexdemo'';

export default class App extends Component {
  render() {
    return (
      // <Bananas name = "Tapan"/>
      <View>
        <FlexibleViews />
      </View>

    );
  }
}

Eso me da este error:

Ahora, si intento ejecutar el código agregando el código flexdemo.js en App.js, entonces todo funciona bien.

Cambió la App.js de esta manera:

import React, { Component } from ''react'';
import { AppRegistry, View } from ''react-native'';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can''t expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: ''powderblue''}} />
        <View style={{flex: 2, backgroundColor: ''skyblue''}} />
        <View style={{flex: 3, backgroundColor: ''steelblue''}} />
      </View>
    );
  }
}

Answer 1

Baje la versión nativa, luego obtuve un error diferente, básicamente lo que era, tenía una cadena simple dentro de una vista, algo como esto:

<View>
    MyComponent
</View>

Tuve que envolver la cadena con un componente de texto como este:

<View>
    <Text>MyComponent</Text>
</View>

Espero que ayude

Answer 2

Eliminar comentarios dentro del componente.

Answer 3

Eliminar el comentario en el bloque de retorno "//" Encontré el mismo problema cuando accidentalmente agregué un '';'' en el bloque de retorno, el iOS funciona bien, pero el Android tiene esta información de error

Answer 4

Eliminar el punto y coma al renderizar un método en

<View style={styles.container}> {this.renderInitialView()} //semi-color should not be here </View>

Answer 5

En mi caso tuve una condición en mi función de renderización que resultó en evaluar 0.

Parece que 0 && ''some jsx'' se rompe en las versiones más nuevas de reaccionar de forma nativa.

Ejemplo de error:

render(){
   return <View>
              {this.state.someArray.length && <View>...</View>}
      </View>
}

Aunque esto debería ser válido para javascript y funciona en reaccionar ya que 0 es falsey, falla en reaccionar de forma nativa, no estoy seguro de por qué, pero funciona con una pequeña refactorización como

Ejemplo de trabajo:

render(){
   return <View>
              {this.state.someArray && this.state.someArray.length> 0 && 
              <View>...</View>}
          </View>
}

Answer 6

En mi caso, tenía pequeños () corchetes alrededor de una de mis vistas que estaban causando un error.

({renderProgress()})

La eliminación de pequeños soportes funcionó para mí.

{renderProgress()}

Answer 7

Este error es generalmente de uno de los siguientes errores

• Eliminar comentarios innecesarios y eliminar comentarios de la función de retorno.
• Compruebe el nombre correcto de la variable.
• Compruebe si hay punto y coma involuntario o cualquier sintaxis incorrecta

Answer 8

Este error también se produce si tiene comentarios en su función render () return (). Elimine todos los comentarios en su función de devolución al procesar JSX

Answer 9

Me he encontrado con el mismo problema ahora mismo y lo resolví eliminando los comentarios que hice al editar el proyecto en Android Studio y, por ahí, el shorotcut del comentario simplemente agrega / * y * / pero, en realidad, para responder de forma nativa, se debe incluir el código comentado. con inicio y final de llaves, por ejemplo, lo siguiente sería un comentario no válido:

/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/

Y lo siguiente será válido:

{/*<Text style={styles.pTop}>
 {
    this.state.response.map((index, value) => {
    return index.title;
    })
 }
 </Text>*/}

Usted ve que hay solo una pequeña diferencia de encerrar el comentario entre llaves.

Answer 10

Pude reproducir el problema con el código que proporcionaste. La solución es doble:

1. En su archivo flexdemo.js debe eliminar los espacios en blanco de las etiquetas <View> . Se consideran como texto, y el texto solo se permite dentro de un componente <Text> . Recomiendo que las etiquetas <View> se cierren automáticamente hasta que tengan algo de contenido, para evitar este problema en el futuro, así:

   import React, { Component } from ''react'';
   import { View } from ''react-native'';
   
   export default class FlexibleViews extends Component {
     render() {
       return (
         <View style={{ flex: 1 }}>
           <View style={{ flex: 1, backgroundColor: ''powderblue'' }} />
           <View style={{ flex: 2, backgroundColor: ''skyblue'' }} />
           <View style={{ flex: 3, backgroundColor: ''steelblue'' }} />
         </View>
       );
     }
   }

   Esto generará sus componentes pero aún así será defectuoso, ya que no verá nada en la pantalla.

2. Para que aparezcan sus tonos de azul flexibles, deberá agregar flex al componente <View> en su archivo App.js o (dependiendo de cuáles sean sus próximos pasos, supongo) eliminarlos y mostrar sus <FlexibleViews> como componente raíz, ya que es básicamente un componente <View> con algunos hijos de todos modos.

Answer 11

Quiero dar una respuesta más general aquí, porque puede haber varias razones para que el problema devuelva el mismo mensaje de error. Los tres que más he visto:

1. Los comentarios pueden ser la causa. Pero en lugar de eliminar los comentarios, haz que funcionen:

In the `return()`-part, variables need to be wrapped in {} like
`{this.state.foo}` so wrapping the comments works fine... 

    return(
        <Text> This works {/* it really does */}</Text>
    );

... siempre y cuando no sean el primer o el último elemento en la declaración de retorno:

    return(
      {/* This fails */}
      <Text> because the comment is in the beginning or end </Text>
      {/* This also fails */}
    );

2. La representación condicional podría ser la causa. Si myCheck no está definido o es una cadena vacía, esto puede fallar:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {myCheck && <MyComponent />}
    );

¡¡Pero añadiendo doble negación !! trabajos:

    const myCheck = ""; /* or const myCheck = undefined */
    return(
      {!!myCheck && <MyComponent />}
    );

3. Los espacios en blanco (o en realidad cualquier cadena) dentro de un componente pueden causar esto, si no está en un componente <Text> :

Texto en una vista por ejemplo:

    /* This fails */
    return(
      <View>it really does</View>
    );

Pero también el pequeño espacio entre dos componentes:

    /* <View>*Space*<Text> fails: */
    return(
      <View> <Text>it really does</Text> </View>
    );

Pero funciona si en una nueva línea:

    return(
      <View>
        {/* This works */}
        <Text>surpisingly it does</Text>
      </View>
    );

Desafortunadamente, estos escollos no siempre conducen a errores. A veces funcionan. Supongo que esto depende de cuál de las muchas herramientas / componentes / componentes que utilices y sus versiones en tu aplicación.

Answer 12

Si tiene if else instrucción en su función render() use !! Me gusta esto:

{!! (this.state.your_state) &&
   <View>
        <Text>Your Text</Text>
   </View>
}

en lugar de:

{(this.state.your_state) &&
    <View>
         <Text>Your Text</Text>
    </View>
}