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配置文件，增加一些配置：

<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>
    <string>Fontisto.ttf</string>
  </array>

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配置文件

<key>UIAppFonts</key>
<array>
    <string>antfill.ttf</string>
    <string>antoutline.ttf</string>
</array>

安卓版本配置
把字体文件复制到**/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按需加权限：

<!-- iOS 10或更高版本的必须要 -->
<key>NSCameraUsageDescription</key>
<string>第一次访问相机提示的信息</string>

<!-- iOS 11或更高版本的要求:只有当你计划使用相册时，才需要包括这些内容 -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>第一次使用相册时提示给用户的信息</string>

<!-- 只有当你计划使用相册时，才包括这些 -->
<key>NSPhotoLibraryUsageDescription</key>
<string>照片库第一次被访问，给用户提示的信息</string>

<!-- 只有当你计划使用麦克风录制视频时，才包括这个 -->
<key>NSMicrophoneUsageDescription</key>
<string>您在第一次访问麦克风时向用户发送的信息</string>

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

missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line

位置如下：

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

向您的应用android/app/src/main/AndroidManifest.xml文件添加权限

<!-- 必需的 -->
<uses-permission android:name="android.permission.CAMERA" />

<!-- 只有当你计划使用相册时，才包括这些 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- 只有当你计划使用麦克风录制视频时，才包括这个 -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

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

multiDexEnabled true

修改完以后如下：
defaultConfig {
applicationId “com.sdzzvc”
multiDexEnabled true // <— 加入这一行
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName “1.0.3”
}

react-native-device-info

npm install --save react-native-device-info

axios

npm install axios