React Native函数组件中React.useState使用问题及代码修复求助

问题分析 #

你的代码存在几个核心错误，导致Alert无法显示、点击按钮后视图消失：

1. 错误使用Web HTML标签：React Native不支持<button>、<div>这类Web标签，必须使用RN原生组件。
2. CSS文件不兼容：React Native不支持直接导入.css文件，样式需通过StyleSheet定义。
3. 布局逻辑问题：父View的flex:1配合横向flex布局，会导致元素挤压；绝对定位的写法不符合RN规范。

修复后的完整代码 #

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const FoodRow = (props) => {
    const [isAlertVisible, setIsAlertVisible] = React.useState(false);

    const addToCartClick = () => {
        setIsAlertVisible(true);
        setTimeout(() => {
            setIsAlertVisible(false);
        }, 3000);
    }

    return (
        <View style={styles.rowContainer}>
            <Text style={styles.restaurantName}>{props.title}</Text>
            <Text style={styles.restaurantNameDesc}>{props.price}</Text>
            <TouchableOpacity style={styles.addButton} onPress={addToCartClick}>
                <Text style={styles.buttonText}>Add To Cart</Text>
            </TouchableOpacity>

            {isAlertVisible && (
                <View style={styles.alertContainer}>
                    <View style={styles.alertInner}>
                        <Text>Alert! Alert!</Text>
                    </View>
                </View>
            )}
        </View>
    )
}

export default FoodRow

const styles = StyleSheet.create({
    rowContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 10,
        paddingHorizontal: 15,
        position: 'relative', // 为绝对定位的alert提供参考
    },
    restaurantName: {
        color: 'red',
        fontSize: 30,
        fontStyle: 'italic',
        marginRight: 15,
    },
    restaurantNameDesc: {
        color: 'black',
        fontSize: 20,
        fontStyle: 'italic',
        marginRight: 20,
    },
    addButton: {
        backgroundColor: "blue",
        paddingHorizontal: 15,
        paddingVertical: 8,
        borderRadius: 4,
    },
    buttonText: {
        color: 'white',
        fontSize: 14,
    },
    alertContainer: {
        position: 'absolute',
        top: 40,
        left: 0,
        right: 0,
        alignItems: 'center',
    },
    alertInner: {
        paddingHorizontal: 16,
        paddingVertical: 8,
        backgroundColor: '#ffffff',
        borderRadius: 4,
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 2 },
        shadowOpacity: 0.7,
        shadowRadius: 5,
        elevation: 3, // Android阴影
    },
})

关键修复点说明 #

• 用TouchableOpacity替代<button>，使用onPress替代onClick，这是RN中处理点击交互的标准方式。
• 用View替代<div>，所有样式统一通过StyleSheet定义，移除.css文件导入。
• 调整父容器布局：移除flex:1避免元素被过度拉伸，添加position: 'relative'让alert的绝对定位以父容器为参考。
• 优化alert样式：使用RN的shadow和elevation属性实现阴影效果，替代Web的box-shadow。
• 调整文本元素的margin替代paddingLeft，避免横向布局下的挤压问题。

内容的提问来源于stack exchange，提问作者Anish Mittal