React Native 中 Button 组件未定义的解决方案
在 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 免费一键快速抠图支持下载高清图片
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2532131.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!