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 免费一键快速抠图，支持下载高清图片