用 AI 快速写一个 APP!RN Expo 54版本完整避坑教程.

文字错误写法：<View>Hello</View>正确写法：<View><Text>Hello</Text></View>

按钮错误写法：<buttononClick={}></button>正确写法：<TouchableOpacityonPress={() => alert('')}>  <Text >按钮</Text></TouchableOpacity><Button></Button>系统原生按钮（样式很丑，一般不用）

可滚动区域：正确写法：<ScrollView></ScrollView>输入框：正确写法：<TextInputplaceholder="请输入"/>图片：正确写法：<Imagesource={{uri:"https://..."  }}/>

错误写法.box { display: flex; font-size: 14px; }正确写法：const styles = StyleSheet.create({  box: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#fff' // 手机里没有 background，必须写 backgroundColor  },  text: {    fontSize: 14, // 手机里不需要写 px，直接写数字    color: '#333'  }});推荐twrnc库：import tw from "twrnc";<View style={tw`p-4 bg-white rounded-xl`}>使用NativeWind库，可以向tailwind一样写：<View className="p-4 bg-white">NativeWind v4对应：Tailwind v3NativeWind v5对应：Tailwind v4pnpm add nativewind配置这三个：babel.config.jstailwind.config.jsmetro.config.js

错误写法<a href="">history.push();正确写法：import { useLocalSearchParams } from 'expo-router';const { id } = useLocalSearchParams();下载:expo-web-browser  npx expo install expo-web-browserexpo-router npx expo install expo-router

app/                          ← 路由根目录├── _layout.js                ← 全局布局（必须）├── index.js                  ← / 首页├── about.js                  ← /about 关于页├── profile.js                ← /profile 个人中心├── details/│   └── [id].js               ← /details/123 动态参数└── (tabs)/                   ← 分组文件夹，不影响 URL    ├── _layout.js            ← Tab 栏布局    ├── home.js               ← tab1    └── me.js                 ← tab2

npx expo install react-native-safe-area-contextimport { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';<SafeAreaView></SafeAreaView>

import { Platform } from 'react-native';const isIOS = Platform.OS === 'ios'; // 返回 true 或 false

npx expo install @expo/vector-icons

npx expo install react-native-paper或者 NativeBasenpx expo install native-base

npx expo install expo-location// 1. 请求权限const { status } = await Location.requestForegroundPermissionsAsync();if (status !== 'granted') {   setErrorMsg('权限被拒绝');   return;}// 2. 获取当前位置const locationData = await Location.getCurrentPositionAsync({  accuracy: Location.Accuracy.High, // 定位精度});setLocation(locationData);

import AsyncStorage from '@react-native-async-storage/async-storage';// 存await AsyncStorage.setItem('token', 'abc123');// 取const token = await AsyncStorage.getItem('token');// 删await AsyncStorage.removeItem('token');

useEffect(() => {  fetch('https://api.example.com/data')    .then(res => res.json())    .then(data => console.log(data))    .catch(err => console.error(err));}, []);// 推荐用 async/awaitconst loadData = async () => {  try {    const res = await fetch('https://api.example.com/data');    const data = await res.json();    setList(data);  } catch (e) {    console.error(e);  }};Hooks 和 React 一模一样