項目中執(zhí)行的命令在react-navigation官方文檔

1.安裝
在您的React Native項目中安裝所需的軟件包：

yarn add @react-navigation/native

2.安裝依賴

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庫
有三種導(dǎo)航模式可以選，分別是StackNavigator棧導(dǎo)航、TabNavigator標(biāo)簽導(dǎo)航、DrawerNavigator抽屜導(dǎo)航，下面會分別說一下怎么使用。

yarn add @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer

image.png

4.安裝完成檢驗

image.png

5.異步存儲模塊
該模塊讓我們將數(shù)據(jù)保存在設(shè)備存儲中

yarn add @react-native-community/async-storage

6.側(cè)滑刪除組件
這個模塊允許我們將數(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開發(fā)，則需要安裝Pod（通過Cocoapods）以完成鏈接

cd ios && pod install && cd ..
cd android && ./gradlew clean && cd ..