react-native实践日记--5.ReactNative 项目版本升级，0.61到0.72升级的问题记录（一）

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
1
2
3
4
5

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>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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.Navigator
      initialRouteName="Home"
      screenOptions={{ gestureEnabled: false }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My app' }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        initialParams={{ user: 'me' }}
      />
    </Stack.Navigator>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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;

  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三、关于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天
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

未完待续！