2020React Native 常用的组件安装汇总

经常创建新项目做各种测试，为了方便复制。汇总一下我在2020React Native 常用的组件的安装配置。

环境信息

macOS Catalina 10.15.6
node 14.2.0
pod 1.8.4
react-native 0.63.3
react 16.13.1
xcode 12.1

React Navigation

(2020)React Native入门-React Navigation 5.x+react-native-vector-icons+夜间模式

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/stack

npm install @react-navigation/bottom-tabs

react-native-vector-icons

npm install react-native-vector-icons --save

IOS配置 修改/NavigationDemo/ios/NavigationDemo/Info.plist配置文件，增加一些配置：

UIAppFonts
  
    AntDesign.ttf
    Entypo.ttf
    EvilIcons.ttf
    Feather.ttf
    FontAwesome.ttf
    FontAwesome5_Brands.ttf
    FontAwesome5_Regular.ttf
    FontAwesome5_Solid.ttf
    Foundation.ttf
    Ionicons.ttf
    MaterialIcons.ttf
    MaterialCommunityIcons.ttf
    SimpleLineIcons.ttf
    Octicons.ttf
    Zocial.ttf
    Fontisto.ttf
  

android配置 NavigationDemo/android/app/build.gradle

修改这个配置文件，增加以下配置：

project.ext.vectoricons = [
        iconFontNames: ['AntDesign.ttf',
                        'Entypo.ttf',
                        'EvilIcons.ttf',
                        'Feather.ttf',
                        'FontAwesome.ttf',
                        'FontAwesome5_Brands.ttf',
                        'FontAwesome5_Regular.ttf',
                        'FontAwesome5_Solid.ttf',
                        'Foundation.ttf',
                        'Ionicons.ttf',
                        'MaterialIcons.ttf',
                        'MaterialCommunityIcons.ttf',
                        'SimpleLineIcons.ttf',
                        'Octicons.ttf',
                        'Zocial.ttf',
                        'Fontisto.ttf'] // Name of the font files you want to copy
]
 
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Ant Design Mobile RN

2020年React Native使用Ant Design Mobile RN组件

npm install @ant-design/react-native --save

npm install babel-plugin-import --save-dev

babel.config.js配置文件增加如下配置：

plugins: [
    ['import', {libraryName: '@ant-design/react-native'}], // 与 Web 平台的区别是不需要设置 style
  ],

修改完成后的如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['import', {libraryName: '@ant-design/react-native'}], // 与 Web 平台的区别是不需要设置 style
  ],
};

RN 0.63版执行：

npm install @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager @react-native-community/async-storage --save

用xcode拖字体fonts目录到项目中，具体叁考：2020年React Native使用Ant Design Mobile RN组件 修改Info.plist配置文件

UIAppFonts

    antfill.ttf
    antoutline.ttf

安卓版本配置 把字体文件复制到**/android/app/src/main/assets/fonts**这个目录即可。

react-native-webview

npm install --save react-native-webview

react-native-camera

2020年React Native 实现扫描二维码function组件写法

npm install react-native-camera --save

权限配置： ios: 修改Info.plist按需加权限：

NSCameraUsageDescription
第一次访问相机提示的信息


NSPhotoLibraryAddUsageDescription
第一次使用相册时提示给用户的信息


NSPhotoLibraryUsageDescription
照片库第一次被访问，给用户提示的信息


NSMicrophoneUsageDescription
您在第一次访问麦克风时向用户发送的信息

Android-其他必需步骤 将以下行插入android/app/build.gradle：

missingDimensionStrategy 'react-native-camera', 'general' // 

安卓build 报错Cannot fit requested classes in a single dex file

multiDexEnabled true

修改完以后如下： defaultConfig { applicationId “com.sdzzvc” multiDexEnabled true //