Al correr el proyecto y entro al localhost unicamente aparece esto:
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}