1.react-navigation5.x导航控制器

项目中执行的命令在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库
有三种导航模式可以选，分别是StackNavigator栈导航、TabNavigator标签导航、DrawerNavigator抽屉导航，下面会分别说一下怎么使用。

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

image.png

4.安装完成检验

image.png

5.异步存储模块
该模块让我们将数据保存在设备存储中

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

6.侧滑删除组件
这个模块允许我们将数据显示在列表界面中

yarn add react-native-swipe-list-view

7.字体图标模块Vector Icon

yarn add react-native-vector-icons

8.moment模块
该模块用于执行日期格式化

yarn add moment

9.iOS 设置

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.安卓设置

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开发，则需要安装Pod（通过Cocoapods）以完成链接

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