React Native框架升级0.60+

前几天公司React Native项目升级，发现0.50版本和0.60版本改变还是很大的，而且很多第三方的库也已经落后于最新版本比较多了。所以打算把原来的项目升级一下。我还是按照原来React Native框架探索学习笔记形势来写这篇文章，详细的说说升级过程和新的第三方库使用。

内容结构

• 依赖升级
• JavaScript代码检测
  • ESlint在VS Code下的配置
• 页面管理
  • 底部导航
  • 页面导航
  • 切换导航
• 数据管理
  • 全局数据管理
  • 网络请求错误管理

依赖升级

我的升级方法比较笨。

• npx react-native init MyTestApp创建一个新的项目
• 把里边的package.json复制到老的项目
• 去掉Link Binary With Libraries用到的React Native第三方库
• yarn
• pod install

这里边可能会遇到的问题和注意事项。去掉Link Binary With Libraries用到的React Native第三方库。只保留系统的。

老项目
如果遇到Swift相关报错。例如Auto-Linking library not found for -lswiftSwiftOnoneSupport类似这样的错误，可以通过创建Swift文件解决。具体可以查看It gives errors when using Swift Static library with Objective-C project。

JavaScript代码检测

与老版相比，新版的React Native为我们提供了@react-native-community/eslint-config。所以需要在.eslintrc.js文件中需要修改extends。

module.exports = {
  root: true,
  extends: '@react-native-community',
}

导航管理

在上次公司的项目升级中发现react-navigation已经到了V5, 而且写法也和之前有了很大的不同。

底部导航

底部导航

const TabBarStack = () => (
  <Tab.Navigator
    tabBarOptions={{
      activeTintColor: '#6699ff',
      inactiveTintColor: '#999',
    }}
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused }) => tabarIcons[route.name].render(focused),
    })}
  >
    <Tab.Screen name="Home"
      component={HomeStack}
      options={({ route }) => ({
        tabBarLabel: '首页',
        tabBarVisible: route.state && route.state.index === 0 // ~注意~ 如果想实现隐藏Tabbar的功能需要进行此配置
      })} />
    <Tab.Screen name="Message" component={MessageStack} options={{ tabBarLabel: '信息' }} />
    <Tab.Screen name="Profile" component={ProfilePage} options={{ tabBarLabel: '我的' }} />
  </Tab.Navigator>
)

页面导航

详情页

const HomeStack = () => (
  <Stack.Navigator
    screenOptions={StackNavigatorOptions}
  >
    <Stack.Screen name="Home" component={HomePage} options={{ title: '首页' }} />
    <Stack.Screen name="HomeDetail" component={HomeDetailPage} options={{ title: '详情' }} />
  </Stack.Navigator>
)

切换导航

切换导航
这个是和之前的版本不一样的，在V5中去掉了createSwitchNavigator。所以实现起来有所不同。

const AppStack = ({ isLaunching }) => (
  <Stack.Navigator
    screenOptions={{
      animationEnabled: false //想去掉Launch到Tabbar侧换的动画需要设置为false
    }}
  >
    {
      isLaunching ?
        <Stack.Screen name="Launch" component={LaunchPage} options={{ headerShown: false, animationEnabled: false }} />
        : <Stack.Screen name="TabBar" component={TabBarStack} options={{ headerShown: false }} />
    }
  </Stack.Navigator>
)

const SwitchStack = ({ isLaunching }) => {
  return (
    <NavigationContainer>
      <AppStack isLaunching={isLaunching} />
    </NavigationContainer>
  )
}

最后

更多详细的代码大家可以看源码DLReactNativeArchitecture。不知道这个对大家有没有帮助，本人水平有限。写文章条理也不是太清晰，还有些名字写得也不是特别合适。如果大家对代码，对文章有什么问题，建议可以在评论留言。大家一起学习，一起进步。