经常创建新项目做各种测试,为了方便复制。汇总一下我在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