項(xiàng)目中執(zhí)行的命令在react-navigation官方文檔
1.安裝
在您的React Native項(xiàng)目中安裝所需的軟件包：
yarn add @react-navigation/native
2.安裝依賴(lài)
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
image.png
3.安裝navigator庫(kù)
有三種導(dǎo)航模式可以選，分別是StackNavigator棧導(dǎo)航赎线、TabNavigator標(biāo)簽導(dǎo)航赶促、DrawerNavigator抽屜導(dǎo)航祥国，下面會(huì)分別說(shuō)一下怎么使用涤垫。
yarn add @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer
image.png
4.安裝完成檢驗(yàn)
image.png
5.異步存儲(chǔ)模塊
該模塊讓我們將數(shù)據(jù)保存在設(shè)備存儲(chǔ)中
yarn add @react-native-community/async-storage
6.側(cè)滑刪除組件
這個(gè)模塊允許我們將數(shù)據(jù)顯示在列表界面中
yarn add react-native-swipe-list-view
7.字體圖標(biāo)模塊Vector Icon
yarn add react-native-vector-icons
8.moment模塊
該模塊用于執(zhí)行日期格式化
yarn add moment
9.iOS 設(shè)置
image.png
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
image.png
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>
10.安卓設(shè)置
image.png
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
react-native-screens插件需要下面配置
image.png
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0-alpha02"
11.終端輸入
如果您使用Mac并正在為iOS開(kāi)發(fā)，則需要安裝Pod（通過(guò)Cocoapods）以完成鏈接
cd ios && pod install && cd ..
cd android && ./gradlew clean && cd ..
