React Native中如何根据随机数更新按钮颜色与显示文本

你的问题出在用普通变量存储状态，React不会监听普通变量的变化来触发组件重渲染。要实现UI随数据更新，必须使用React的useState状态钩子。

以下是修改后的完整代码：

import React, { useState } from 'react';
import { Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';

function generateRandomNumber() {
    const min = 1;
    const max = 100;
    const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    return randomNumber;
};

function NoIdeaHowToFixScreen({ navigation }) {
    // 用useState声明状态变量，初始值为1
    const [x, setX] = useState(1);

    const pressRandom = () => {
        const newRandom = generateRandomNumber();
        setX(newRandom); // 通过setX更新状态，触发组件重渲染
        console.log(newRandom);
    }

    return (
        <SafeAreaView style={styles.container}>
            <View>
                {/* 把固定文本"x"改成显示状态变量x */}
                <Text style={styles.letter_text}>{x}</Text>
            </View>
            <Pressable
                style={{ backgroundColor: x < 50 ? "red": "green" }}
            >
                <Text style={{ color: "black" }}>{x}</Text>
            </Pressable>
            <Pressable
                style={{backgroundColor: "black"}}
                onPress={pressRandom}
            >
                <Text style={{ color: "white"}}>Random</Text>
            </Pressable>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
})

export default NoIdeaHowToFixScreen;

关键改动点：

• 导入useState钩子：从react库中额外引入useState工具
• 替换普通变量：用const [x, setX] = useState(1)替代let x = 1，x存储当前状态值，setX是专门的状态更新函数
• 修正状态更新逻辑：在pressRandom中生成新随机数后，调用setX(newRandom)触发组件重渲染，而非直接给变量赋值
• 同步文本显示：将原本显示固定"x"的Text组件内容改为{x}，实时展示当前随机数

这样修改后，点击"Random"按钮时，状态更新会自动触发组件重新渲染，UI中的文本内容和按钮背景色都会同步更新为新随机数对应的状态。

内容的提问来源于stack exchange，提问作者Andrey Loshakov