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

Ant Design Mobile RN是一个很优秀的React Native 界面库，可以帮助我们简单方便的开发出漂亮的界面。我在基于0.63版本使用的过程中遇到一些小波折，比如字体无法正常，各种红屏，缺少各种组件之类的。这里分享一下使用过程。

图文不直观？来看视频吧

https://www.bilibili.com/video/bv1Mf4y1X7ir

新手教程之React Native 0.63版本使用Ant Design Mobile RN组件

新建RN项目

npx react-native init AntDesignDemo

换国内清华大学的提高速度（非必须）

ios/Podfile文件头部增加下面

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

安装组件

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

配置按需加载

安装babel-plugin-import组件

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
  ],
};

增加ant design依赖的组件（RN0.63）

实测到上面的步骤0.61版本的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

执行上面命令执行缺失的组件（RN0.63版本），非0.63版本的按需增加组件。

组件安装完成后，要执行下pod install

cd ios && pod install && cd ..

此时运行ios版本yarn ios ，如果使用到使用字体图标的页面会出现如下红屏错误，

Unrecognized font family 'antoutline'

报错分析：找不到相应的字体。

官方文档的解决办法是：

链接字体图标#
react-native link @ant-design/icons-react-native
根据我实测，没有用。懂的小伙伴请留言告知原因。

（IOS）解决字体缺失问题

使用xcode打开ios目录下的.xcworkspace文件，打开ios项目。

用访达打开/node_modules/@ant-design/icons-react-native/fonts目录并拖拽到xcode中，操作如下：

字体文件已经增加了，现在还需要，修改Info.plist配置文件。

修改Info.plist配置文件

xcode中可以在Info.plist文件中右击，“Open As”=>"Source Code",在配置中增加如下内容：

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

修改完成后的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>UIAppFonts</key>
	<array>
    	<string>antfill.ttf</string>
    	<string>antoutline.ttf</string>
	</array>
	<key>CFBundleDevelopmentRegion</key>
	<string>en</string>
	<key>CFBundleDisplayName</key>
	<string>pomegranate</string>
	<key>CFBundleExecutable</key>
	<string>$(EXECUTABLE_NAME)</string>
	<key>CFBundleIdentifier</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
	<key>CFBundleInfoDictionaryVersion</key>
	<string>6.0</string>
	<key>CFBundleName</key>
	<string>$(PRODUCT_NAME)</string>
	<key>CFBundlePackageType</key>
	<string>APPL</string>
	<key>CFBundleShortVersionString</key>
	<string>1.0</string>
	<key>CFBundleSignature</key>
	<string>????</string>
	<key>CFBundleVersion</key>
	<string>1</string>
	<key>LSRequiresIPhoneOS</key>
	<true/>
	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
		<key>NSExceptionDomains</key>
		<dict>
			<key>localhost</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
		</dict>
	</dict>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string></string>
	<key>UILaunchStoryboardName</key>
	<string>LaunchScreen</string>
	<key>UIRequiredDeviceCapabilities</key>
	<array>
		<string>armv7</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
</dict>
</plist>

至此字体添加完成。

来看下效果吧。