0

Al correr el proyecto y entro al localhost unicamente aparece esto: introducir la descripción de la imagen aquí Realmente no importa si modifico o dejo el proyecto en blanco, el resultado es siempre es el mismo cuando debería aparecer un formulario de prueba, igual al ejecutar npm start no se abre automaticamente Metro Bundler, unicamente lo que aparece en la foto. Es igual cuando uso el app Expo para ver desde mi celular, después de que aparezca android bundling complete no carga nada, no se que estoy haciendo mal.

Aqui el codigo del proyecto:

App.js

//@ts-check
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {Principal} from '../DevMov/Elementos_Components.js';
import React from 'react';
import { Form } from '../DevMov/components/form.js';


const loginForm = {
  usuario: { type: "TEXT"},
  password: { type: "TEXT"}
}

export default function App() {
  return (
    <View style = {Principal.container} >
    
      <Text>
        TEST COMPONENT</Text>
      <Text >
        TEST COMPONENT</Text>
 
          <Form model={loginForm}></Form>
      <StatusBar style="auto" />
    </View>
  );
}

Form.js

//@ts-check
import React, { Component } from 'react';
import { Text, View, TextInput, Button, TouchableOpacity } from 'react-native';
import {Principal} from '../Elementos_Components.js';
// @ts-ignore
import { ModelProperty as ModelProperty } from '../Model/Common_Model.js';

class Form extends Component {
  constructor(props) {
    super(props);
    this.model = props.model;
    this.editObject = props.editObject ?? {};
    this.controls = [];
    for (const key in this.model) {
      this.controls.push(constructControlFromModel(key,
        this.model[key],
        this.editObject[key],
        this.onChangeText));
    }
  }
  onChangeText = (value, prop) => {
    this.editObject[prop] = value;
    console.table(this.editObject);
  }
  render() {
    return ( 
      <View>
        {this.controls.map((control, index) => (
          <View key={Object.keys(this.model)[index]}>
            {control}
          </View>
        ))}
      </View>
    );
  }
}
/**
 *  * @param {String} propName
     * @param {ModelProperty} prop
     * @param {any} propName
     * @param {Function} propName
     * @returns {any}
     */
function constructControlFromModel(propName, prop, value, onChangeText) {
  /* aca boton de guardado -
        implementer tipo fecha y password*/

  if (prop.type.toUpperCase() == "TEXT") {
    return (
      <View>
        <Text style={Principal.header2}>{propName}</Text>
        <TextInput
          style={Principal.input}
          onChangeText={value => onChangeText(value, propName)}
          value={value}
          secureTextEntry
        />
      </View>
    );
  } else {
    return (
      <View>
        <Text>{propName}</Text>
      </View>
    );
  }

  function boton(props) {
    const { onPress, text } = props
    return ( 
      <TouchableOpacity onPress={onPress}>
      <Text>{text}</Text>
    </TouchableOpacity>
    )
  }
}

export { Form };

CommonModel.js

/**
 * @typedef {Object} ModelProperty
 * @property {String} type
 */

class ModelProperty{}
export {ModelProperty}

1 respuesta 1

0

Tu código funciona bien ya que he iniciado un proyecto nuevo usando expo.


package.json

{
  "dependencies": {
    "expo-constants": "~13.2.4",
    "@expo/vector-icons": "^13.0.0",
    "react-native-paper": "4.9.2",
    "expo-status-bar": "~1.4.0"
  }
}

introducir la descripción de la imagen aquí

1
  • No sabía de la existencia de los snacks en react, gracias por el aporte, probe ahi y si funciona bien. Supongo que es algún problema de dependencias.
    – Nery
    Commented el 2 may. 2023 a las 0:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.