资讯动态

React Native 中 Button 组件未定义的解决方案

发布时间:2026/9/23 9:22:30 来源:尧图企业网站定制
在 React Native 项目中使用 Button 组件时出现 “Button is not defined” 错误根本原因是 React Native 核心库已移除默认导出的 Button需改用 TouchableOpacity Text 或显式导入 react-navigation/elements 中的按钮组件。 在 react native 项目中使用 button 组件时出现 “button is not defined” 错误根本原因是 react native 核心库已移除默认导出的 button需改用 touchableopacity text 或显式导入 react-navigation/elements 中的按钮组件。该错误常见于升级到 React Native 0.72 或使用较新 CLI 创建的项目。从 React Native 0.72 起官方正式弃用了内置的 Button / 组件即 import { Button } from react-native因其样式僵硬、定制性差且与现代导航生态不兼容。因此即使你正确配置了 React Navigation 的 navigation 对象只要仍尝试从 react-native 导入 Button就会触发 ReferenceError: Button is not defined。? 正确做法是避免使用 Button改用可完全自定义的触摸响应组件如 TouchableOpacity、Pressable 或 TouchableHighlight并配合 Text 实现语义化按钮行为。以下是推荐的修复方案以 TouchableOpacity 为例// Home.jsimport React from react;import { View, Text, TouchableOpacity } from react-native;const Home ({ navigation }) { const handleNavigateToGame () { navigation.navigate(Game); }; return ( View style{{ flex: 1, justifyContent: center, alignItems: center, padding: 20 }} Text style{{ fontSize: 18, marginBottom: 32 }}This is the Home screen./Text TouchableOpacity style{{ backgroundColor: #007AFF, paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8, }} onPress{handleNavigateToGame} Text style{{ color: white, fontSize: 16, fontWeight: 600 }}Go to Game/Text /TouchableOpacity /View );};export default Home;?? 注意事项不要再写 import { Button } from react-native —— 该导出已不存在强制使用将导致运行时崩溃 灵办AI 免费一键快速抠图支持下载高清图片

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价