步骤4：代码迁移

grep -rn "from 'prop-types'" src/
grep -rn "\.propTypes\s*=" src/

// ❌ 之前（RN 0.83中不可用）
import PropTypes from 'prop-types';

function UserCard({ name, email, age, onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View>
        <Text>{name}</Text>
        <Text>{email}</Text>
        {age && <Text>Age: {age}</Text>}
      </View>
    </TouchableOpacity>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  age: PropTypes.number,
  onPress: PropTypes.func,
};

// ✅ 之后
interface UserCardProps {
  name: string;
  email: string;
  age?: number;
  onPress?: () => void;
}

function UserCard({ name, email, age, onPress }: UserCardProps) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View>
        <Text>{name}</Text>
        <Text>{email}</Text>
        {age && <Text>Age: {age}</Text>}
      </View>
    </TouchableOpacity>
  );
}

grep -rn "\.defaultProps\s*=" src/

// ❌ 之前
MyComponent.defaultProps = {
  name: 'Default',
  age: 0,
  onPress: () => {},
};

// ✅ 之后 — 使用默认参数
function MyComponent({ 
  name = 'Default', 
  age = 0, 
  onPress = () => {} 
}: MyComponentProps) {
  return <Text>{name}</Text>;
}

grep -rn "BackHandler.removeEventListener" src/

// ❌ 之前（在RN 0.83中崩溃）
BackHandler.addEventListener('hardwareBackPress', handler);
// ... 稍后
BackHandler.removeEventListener('hardwareBackPress', handler);

// ✅ 之后 — 订阅模式
const subscription = BackHandler.addEventListener('hardwareBackPress', handler);
// ... 稍后
subscription.remove();

useEffect(() => {
  const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
    // 处理返回键按下事件
    return true; // 防止默认行为
  });

  return () => subscription.remove();
}, []);

grep -rn "useNativeDriver" src/

// ❌ 崩溃 — 同一视图上的scaleAnim（原生驱动）与backgroundAnim（JS驱动）
<Animated.View style={{
  transform: [{ scale: scaleAnim }],             // useNativeDriver: true
  backgroundColor: backgroundAnim.interpolate()  // useNativeDriver: false
}}>
  {/* 内容 */}
</Animated.View>

// ✅ 正确做法 — 按驱动类型拆分为嵌套视图
<Animated.View style={{ transform: [{ scale: scaleAnim }], opacity: opacityAnim }}>
  {/* 原生驱动：transform、opacity */}
  <Animated.View style={{ backgroundColor: colorAnim.interpolate(...) }}>
    {/* JS驱动：backgroundColor */}
    {/* 内容 */}
  </Animated.View>
</Animated.View>

// ❌ 之前 — 旧版上下文（已移除）
class Parent extends React.Component {
  getChildContext() {
    return { theme: 'dark' };
  }
  static childContextTypes = { theme: PropTypes.string };
}

// ✅ 之后 — 现代化上下文API
const ThemeContext = React.createContext('light');

function Parent({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <Text>{theme}</Text>;
}

// ✅ 始终显示导入挂钩
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

grep -rn "useState\|useEffect\|useCallback\|useMemo\|useRef" src/ | grep -v "import"

# 移除@welldone-software/why-did-you-render（声明了peer react@^18）
npm uninstall @welldone-software/why-did-you-render

npm ls react 2>&1 | grep "peer"

// ✅ 之后 — 在SafeAreaProvider中包装应用
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider>
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ 
      flex: 1,
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
    }}>
      {/* 您的应用内容 */}
    </View>
  );
}

// ❌ 之前 (RN 0.72) — 物理像素值
const styles = StyleSheet.create({
  container: {
    width: 1920,
    height: 1080,
    padding: 32,
  },
  title: {
    fontSize: 48,
    marginBottom: 24,
  },
});

// ✅ 之后 (RN 0.83) — dp值，除以2
const styles = StyleSheet.create({
  container: {
    width: 960,
    height: 540,
    padding: 16,
  },
  title: {
    fontSize: 24,
    marginBottom: 12,
  },
});