React Native 中的文本沒有更新

Question

應用程序.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,
  },
});

因此，當我按下 touchableOpacity 時，計數變量應該為自身添加 0.25，這工作正常，但文本

<Text style={styles.Balance}>{count}</Text>

沒有更新。我還想知道我在<Text><Text/>中顯示變量計數的方式是否正確。 文本僅顯示 5 如果您願意請幫忙，我之前沒有使用 React native 的經驗。

Answer 1

React 使用一些鈎子來更新 DOM，你不能只使用變量並期望它來更新 DOM，在這種情況下你需要使用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,
  },
});

您可以閱讀這篇文章以更好地了解 React 及其工作原理。

Answer 2

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>
  );
}