赞
踩
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.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> ); }
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天 }); }
未完待续!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。