ReactNative的版本迭代太频繁，官方说的是React Native原则上每月发布一个新版本，且目前基本是向前不兼容的，导致项目升级很困难，各种依赖插件问题多多，下面是记录的升级中遇到的主要几个印象深刻的问题。

升级：react-native@0.61.5到react-native@0.72.6、react-navigation4.x到react-navigation6.x、react16到react18

一、环境配置
react-native@0.71要求：
（1）Node 的版本应大于等于 16；
（2）需要 Java Development Kit [JDK] 11，而在0.67以前则需要 JDK 1.8 版本（官方也称 8 版本）
（3）Android SDK需要Android 13 (Tiramisu)，SDK Tools需要33.0.0版本，具体可参考官方文档

二、react-navigation升级的问题
我们可以首先去官网看下版本升级都改动了哪些内容，如4.x到5.x的升级：https://reactnavigation.org/docs/5.x/upgrading-from-4.x

1.首先是一些package.json里一些依赖的变动

react-navigation -> @react-navigation/native
react-navigation-stack -> @react-navigation/stack
react-navigation-tabs -> @react-navigation/bottom-tabs, @react-navigation/material-top-tabs
react-navigation-material-bottom-tabs -> @react-navigation/material-bottom-tabs
react-navigation-drawer -> @react-navigation/drawer

2.createAppContainer改成NavigationContainer

/*** 4.x版本 ***/
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';const RootStack = createStackNavigator({ /* your routes here */ });
const AppContainer = createAppContainer(RootStack);// Now AppContainer is the main component for React to render
export default AppContainer;/*** 6.x版本 ***/
import { NavigationContainer } from '@react-navigation/native';export default function App() {return <NavigationContainer>{/*...*/}</NavigationContainer>;
}

3.路由的配置

/*** 4.x版本 ***/
/*通过createStackNavigator这个Api方法配置路由导航*/
const RootStack = createStackNavigator({Home: {screen: HomeScreen,navigationOptions: { title: 'My app' },},Profile: {screen: ProfileScreen,params: { user: 'me' },},},{initialRouteName: 'Home',defaultNavigationOptions: {gestureEnabled: false,},}
);/*** 6.x版本 ***/
/*路由的嵌套和4.x是一样的，只是现在是在组件中配置导航器，所有的配置都作为props参数传递给导航Navigator；  
使用Stack.Screen配置路由；  
参数params配置在Screen的initialParams；  
navigationOptions配置在Screen的options；
defaultNavigationOptions配置在Navigator的screenOptions；*/import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();function RootStack() {return (<Stack.NavigatorinitialRouteName="Home"screenOptions={{ gestureEnabled: false }}><Stack.Screenname="Home"component={HomeScreen}options={{ title: 'My app' }}/><Stack.Screenname="Profile"component={ProfileScreen}initialParams={{ user: 'me' }}/></Stack.Navigator>);
}

4.navigation对象
4.x中navigation中包含各种方法以及screen的state等，在5.x中screen的state则从route中获取

/*** 4.x版本 ***/
class DetailsScreen extends React.Component {render() {const userId = this.props.navigation.state.params.user;//...}
}/*** 6.x版本 ***/
function ProfileScreen({ route }) {const userId = route.params.user;// ...
}

三、关于react-native中的storage存储
之前是在react-native中有个AsyncStorage，后来废弃，官方推荐@react-native-community/async-storage，现在这个库又迁移到@react-native-async-storage/async-storage，也不知为啥，反正咱们就用这个新的库就行，使用也很简单，如下：

//1.安装
npm i @react-native-async-storage/async-storage;//2.引入使用
import AsyncStorage from '@react-native-community/async-storage';export const storage = new Storage({// 最大容量，默认值1000条数据循环存储size: 5000,// 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage// 如果不指定则数据只会保存在内存中，重启后即丢失storageBackend: AsyncStorage,// 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期defaultExpires: 1000 * 3600 * 24,// 读写时在内存中缓存数据。默认启用。enableCache: true,// 如果storage中没有相应数据，或数据已过期，// 则会调用相应的sync方法，无缝返回最新数据sync: {TOKEN() {//token 过期后跳转到登录页console.log('token expires');storage.remove({key: config.SAVE_TOKEN_KEY});return '';}}
});//保存token凭证
export function saveToken(token) {storage.save({key: config.SAVE_TOKEN_KEY,data: token,autoSync: true,expires: 1000 * 3600 * 24 //有效期1天});
}

未完待续！