Soy nuevo en reaccionar. Necesito ayuda con el estado de uso. Necesito cambiar el estilo para mostrar ninguno. Guardar el texto en el estado. Luego mostrarlo. Úselo en el css en línea. El código está debajo.
import React, { useState, Component, useEffect } from 'react'; import { StyleSheet, Text, View, Alert, Image} from "react-native"; import MashButton from "./src/CustomButton"; import Mashcalculator from "./src/calculator"; import { Textfit } from "react-textfit"; import NetInfo from "@react-native-community/netinfo"; const runstartfunc = (res) =>{ if (res == 'Connected'){ createTwoButtonAlert('continue'); }else{ createTwoButtonAlert('text'); } } const unsubscribe = NetInfo.addEventListener(state => { if(state.isConnected == true){ runstartfunc('Connected'); }else{ runstartfunc('Not Connected'); } }); const App = () => ( const [hidelogo, setHide] = useState("display:none;"); useEffect(() => { // Update the document title using the browser API unsubscribe(); }), <View style={styles.container}> <Image id="logo" style={styles.tinyLogo} source={require("./assets/logo.png")} /> <Text id="logo-text" style={[styles.logotext, {hidelogo}]}>Show Bookie</Text> </View> ); const styles = StyleSheet.create({ container: { flex: 1, paddingLeft: 5, paddingRight: 5, backgroundColor: "#2e0739", alignItems:"center", justifyContent: "center", }, logotext: { fontSize: 25, color: '#12cfed', fontWeight: "bold", }, tinyLogo: { marginBottom: 10, width: 80, height: 80, }, title: { marginTop: 16, paddingVertical: 8, borderWidth: 4, borderColor: "#20232a", borderRadius: 6, backgroundColor: "#61dafb", color: "#20232a", textAlign: "center", fontSize: 30, fontWeight: "bold", marginBottom: 15, } }); export default App;Cuando ejecuto el código anterior, aparece este error
ERROR Error: llamada de enlace no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones: 1. Es posible que tenga versiones que no coinciden de React y el renderizador (como React DOM) 2. Es posible que esté infringiendo las Reglas de Hooks 3. Es posible que tenga más de una copia de React en la misma aplicación
No sé qué podría estar mal. Realmente agradeceré si me pueden ayudar a resolver esto.
import React, { useState, Component, useEffect } from 'react'; import { StyleSheet, Text, View, Alert, Image} from "react-native"; import MashButton from "./src/CustomButton"; import Mashcalculator from "./src/calculator"; import { Textfit } from "react-textfit"; import NetInfo from "@react-native-community/netinfo"; const runstartfunc = (res) =>{ if (res == 'Connected'){ createTwoButtonAlert('continue'); }else{ createTwoButtonAlert('text'); } } const unsubscribe = NetInfo.addEventListener(state => { if(state.isConnected == true){ runstartfunc('Connected'); }else{ runstartfunc('Not Connected'); } }); const App = () => { const [hidelogo, setHide] = useState("display:none;"); useEffect(() => { // Update the document title using the browser API unsubscribe(); }) return( <View style={styles.container}> <Image id="logo" style={styles.tinyLogo} source={require("./assets/logo.png")} /> <Text id="logo-text" style={[styles.logotext, {hidelogo}]}>Show Bookie</Text> </View> ) }; const styles = StyleSheet.create({ container: { flex: 1, paddingLeft: 5, paddingRight: 5, backgroundColor: "#2e0739", alignItems:"center", justifyContent: "center", }, logotext: { fontSize: 25, color: '#12cfed', fontWeight: "bold", }, tinyLogo: { marginBottom: 10, width: 80, height: 80, }, title: { marginTop: 16, paddingVertical: 8, borderWidth: 4, borderColor: "#20232a", borderRadius: 6, backgroundColor: "#61dafb", color: "#20232a", textAlign: "center", fontSize: 30, fontWeight: "bold", marginBottom: 15, } }); export default App;