No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creaci贸n de componentes

9/16
Recursos

Aportes 12

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Otro aporte por aqu铆 chicos:

Para los que vienen de React, sabr谩n que tambi茅n pueden utilizar un Fragment para definir un nivel m谩s alto dentro de un componente, pr谩cticamente un View o m煤ltiples View.

Pueden hacerlo as铆 en el caso de que lo necesiten:

<>
<View>
	<Text>/<Text>
</View>
<View>
	<TextInput />
</View>
</>

Recuerden que existen componentes que se autocierran como:

<TextInput />, <FlatList />, etc.

Tambi茅n existen los higherOrderComponents (un componente que devuelve o encapsula a otro componente)

<View>
</View>
<PokeBackground>
	<View>
		<Text>
		</Text>
	</View>
</PokeBackground>

Como aporte, quiero a帽adir que ya no es necesario importar React en cada componente. Desde las ultimas versiones de React hace ninguna diferencia Por lo que el c贸digo podr铆a quedar as铆 y seguir funcionando
.

Para crear un input tipo contrase帽a, podemos usar el atributo 鈥渟ecureTextEntry鈥

<TextInput placeholder='Pass' secureTextEntry />
<TextInput placeholder='Pass' secureTextEntry={true} />

Tiene mucha similitud a React, bueno creo que era obvio.

<Text> Hola </Text>
<Text> Adios </Text>

Un View es como un Div en HTML?馃

Cuando las clases tienen esta placa de introducci贸n, ya me doy a la idea lo desactualizada que estar谩 la clase.

Vas muy rapido y no se te entiende mucho 馃槮

No soy un experto, pero el curso esta desactualizado, en relacion con los programas de node.js, sin embargo los codigos que se manejan para su instalaci贸n funcionan, para lo cual es muy importante tener configuradas las variables de entorno. les comparto el codigo de package.json, con el que estoy trabajando(difiere un poco del que esta en el curso):{
鈥渘ame鈥: 鈥渕yhc鈥,
鈥渧ersion鈥: 鈥1.0.0鈥,
鈥渕ain鈥: 鈥渘ode_modules/expo/AppEntry.js鈥,
鈥渟cripts鈥: {
鈥渟tart鈥: 鈥渆xpo start鈥,
鈥渁ndroid鈥: 鈥渆xpo start --android鈥,
鈥渋os鈥: 鈥渆xpo start --ios鈥,
鈥渨eb鈥: 鈥渆xpo start --web鈥,
鈥渆ject鈥: 鈥渆xpo eject鈥
},
鈥渄ependencies鈥: {
鈥渆xpo鈥: 鈥渵49.0.8鈥,
鈥渆xpo-status-bar鈥: 鈥渵1.6.0鈥,
鈥渞eact鈥: 鈥18.2.0鈥,
鈥渞eact-dom鈥: 鈥18.2.0鈥,
鈥渞eact-native鈥: 鈥0.72.4鈥
},
鈥渄evDependencies鈥: {
"@babel/core": 鈥淾7.20.0鈥
},
鈥減rivate鈥: true
}
Con esta configuraci贸n, logre instalar expo-go, en el emulador y funciona bien. Espero les sirva

[](

src/components/LoginForm.jsx

Usando inputs de react native:

  • TextInput
  • Button
import React from "react";
import { TextInput, Button, Text, View } from "react-native";

export default function LoginForm() {
  return (
    <View>
      <Text>Login</Text>
      <TextInput placeholder="Email" />
      <TextInput placeholder="Password" />
      <Button title="Send" onPress={() => console.log("Sending...")} />
    </View>
  );
}