前幾天公司React Native項目升級，發(fā)現(xiàn)0.50版本和0.60版本改變還是很大的譬圣，而且很多第三方的庫也已經落后于最新版本比較多了宴倍。所以打算把原來的項目升級一下宇色。我還是按照原來React Native框架探索學習筆記形勢來寫這篇文章，詳細的說說升級過程和新的第三方庫使用施禾。

內容結構

• 依賴升級
• JavaScript代碼檢測
  • ESlint在VS Code下的配置
• 頁面管理
  • 底部導航
  • 頁面導航
  • 切換導航
• 數(shù)據(jù)管理
  • 全局數(shù)據(jù)管理
  • 網絡請求錯誤管理

依賴升級

我的升級方法比較笨脚线。

• npx react-native init MyTestApp創(chuàng)建一個新的項目
• 把里邊的package.json復制到老的項目
• 去掉Link Binary With Libraries用到的React Native第三方庫
• yarn
• pod install

這里邊可能會遇到的問題和注意事項。去掉Link Binary With Libraries用到的React Native第三方庫弥搞。只保留系統(tǒng)的邮绿。

老項目

JavaScript代碼檢測

與老版相比肛度，新版的React Native為我們提供了@react-native-community/eslint-config傻唾。所以需要在.eslintrc.js文件中需要修改extends。

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

導航管理

在上次公司的項目升級中發(fā)現(xiàn)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 // ~注意~ 如果想實現(xiàn)隱藏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>
)

切換導航

切換導航

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凛辣。不知道這個對大家有沒有幫助，本人水平有限职烧。寫文章條理也不是太清晰扁誓，還有些名字寫得也不是特別合適。如果大家對代碼蚀之，對文章有什么問題蝗敢，建議可以在評論留言。大家一起學習足删，一起進步寿谴。