aplicación.js
import { StatusBar } from "expo-status-bar"; import { TouchableOpacity, Button, StyleSheet, Alert, SafeAreaView, Text, } from "react-native"; export default function App() { let count = 5; let counts = [count]; return ( <SafeAreaView style={styles.container}> <Text style={styles.Text}>Earn Money</Text> <TouchableOpacity onPress={() => { count += 0.25; console.log(count); }} style={{ height: 70, width: 130, backgroundColor: "#ff5c5c", alignSelf: "center", top: 25, }} > <Text style={{ fontWeight: "900", alignSelf: "center", position: "relative", top: 25, }} > Earn 0.20$ </Text> </TouchableOpacity> <Text style={styles.Balance}>{count}</Text> <StatusBar style="auto" /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS === "android" ? 90 : 0, paddingLeft: Platform.OS === "android" ? 10 : 0, }, Text: { justifyContent: "center", alignSelf: "center", color: "orange", fontSize: 25, fontWeight: "900", }, Balance: { justifyContent: "center", alignSelf: "center", color: "orange", fontSize: 25, fontWeight: "900", top: 100, }, });Entonces, cuando presiono touchableOpacity, se supone que la variable de conteo agrega 0.25 a sí misma. Eso funciona bien, pero el texto
<Text style={styles.Balance}>{count}</Text> no se está actualizando. También me gustaría saber si la forma en que muestro el recuento de variables en <Text><Text/> es correcta. El texto solo muestra 5 No tengo experiencia previa con React native si me ayudaría, por favor.
React usa algunos ganchos para actualizar el DOM, no puede simplemente usar variables y esperar que actualice el DOM, en este caso necesita usar el gancho useState
import { StatusBar } from "expo-status-bar"; import { useState} from "react"; import { TouchableOpacity, Button, StyleSheet, Alert, SafeAreaView, Text, } from "react-native"; export default function App() { let [count, setCount] = useState(0); return ( <SafeAreaView style={styles.container}> <Text style={styles.Text}>Earn Money</Text> <TouchableOpacity onPress={() => { setCount(c => c + 0.5) }} style={{ height: 70, width: 130, backgroundColor: "#ff5c5c", alignSelf: "center", top: 25, }} > <Text style={{ fontWeight: "900", alignSelf: "center", position: "relative", top: 25, }} > Earn 0.20$ </Text> </TouchableOpacity> <Text style={styles.Balance}>{count}</Text> <StatusBar style="auto" /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS === "android" ? 90 : 0, paddingLeft: Platform.OS === "android" ? 10 : 0, }, Text: { justifyContent: "center", alignSelf: "center", color: "orange", fontSize: 25, fontWeight: "900", }, Balance: { justifyContent: "center", alignSelf: "center", color: "orange", fontSize: 25, fontWeight: "900", top: 100, }, });Puede leer este artículo para comprender mejor reaccionar y cómo funciona.
import { useState} from "react"; const [count,setCount]=useState(5) // 5 is default value const [update,setUpdate]=useState(0) // add this export default function App() { let count = 5; let counts = [count]; return ( <SafeAreaView style={styles.container}> <Text style={styles.Text}>Earn Money</Text> <TouchableOpacity onPress={() => { count += 0.25; setCount(count) // add this setUpdate(update+1) // add this console.log(count); }} style={{ height: 70, width: 130, backgroundColor: "#ff5c5c", alignSelf: "center", top: 25, }} > <Text style={{ fontWeight: "900", alignSelf: "center", position: "relative", top: 25, }} > Earn 0.20$ </Text> </TouchableOpacity> <Text style={styles.Balance}>{count}</Text> <StatusBar style="auto" /> </SafeAreaView> ); }