Ant Design Mobile RN 安装踩坑

一、组件版本

本文基于

node v14.15.1
yarn 1.22.10
react 17.0.1
react-native 0.64.0
@ant-design/icons-react-native 2.2.1

完成。
补充：目前react-native 已升级到 0.64.1，需要更多的依赖，需要手动添加，见下文。

二、安装步骤：

1. 初始化及启动项目：

npx react-native init myRnAntD
cd ./myRnAntD
npm run andorid

2. 安装相应的软件

这一步非常的奇葩，原因是antd与rn的版本不一致所导致。
react-native 0.6.40 如下：

yarn add @ant-design/react-native @react-native-community/slider @react-native-community/viewpager @react-native-community/segmented-control @react-native-community/cameraroll @react-native-community/async-storage fbjs

react-native 0.6.41如下：

yarn add @ant-design/react-native @react-native-community/slider @react-native-community/viewpager @react-native-community/segmented-control @react-native-community/cameraroll @react-native-async-storage/async-storage fbjs react-native-pager-view

此时已经可以运行绝大多数的AntD的组件了，但是无法进行与Antd的图标库的链接工作，即使用了官网的link 指令，也不能够完成!!!

3. 手工链接图标库

按图示完成文件夹的复制工作（assets，需要新建）

image.png

4. 测试：

完成以下代码复制到App.js中，如果能够显示各复选框，即表示完成！

import React from 'react';
import { Text, View } from 'react-native';
import { Checkbox, List, WhiteSpace } from '@ant-design/react-native';
const AgreeItem = Checkbox.AgreeItem;
const CheckboxItem = Checkbox.CheckboxItem;
export default class BasicCheckboxExample extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      checkBox1: true,
      agreeItem1: true,
      checkboxItem1: true,
    };
  }
  render() {
    return (
      <View>
        <View style={{ padding: 10 }}>
          <Checkbox
            checked={this.state.checkBox1}
            style={{ color: '#f00' }}
            onChange={event => {
              this.setState({ checkBox1: event.target.checked });
            }}
          />
          <WhiteSpace />
          <Checkbox>Checkbox</Checkbox>
          <WhiteSpace />
          <Checkbox checked disabled />
          <WhiteSpace />
          <Checkbox disabled />
        </View>

        <WhiteSpace />
        <AgreeItem>
          Agree agreement agreement agreement agreement agreement agreement
          agreement
        </AgreeItem>
        <WhiteSpace />
        <AgreeItem
          checked={this.state.agreeItem1}
          checkboxStyle={{ color: '#f00' }}
          onChange={event => {
            this.setState({ agreeItem1: event.target.checked });
          }}
        >
          Agree agreement
        </AgreeItem>
        <WhiteSpace />
        <AgreeItem disabled>Not selected. Not editable</AgreeItem>
        <WhiteSpace />
        <AgreeItem checked disabled>
          Force selected. Not editable
        </AgreeItem>

        <List style={{ marginTop: 12 }}>
          <Text style={{ marginTop: 12 }}>Multiple options</Text>
          <CheckboxItem
            checked={this.state.checkboxItem1}
            onChange={event => {
              this.setState({ checkboxItem1: event.target.checked });
            }}
          >
            Option 1
          </CheckboxItem>
          <CheckboxItem>Option 2</CheckboxItem>
          <CheckboxItem disabled>Option 3</CheckboxItem>
          <CheckboxItem disabled checked>
            Option 4
          </CheckboxItem>
        </List>
      </View>
    );
  }
}

5. 附package.json

{
  "name": "myRnAntD",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/react-native": "^4.0.7",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/cameraroll": "^4.0.4",
    "@react-native-community/segmented-control": "^2.2.2",
    "@react-native-community/slider": "^3.0.3",
    "@react-native-community/viewpager": "^5.0.11",
    "fbjs": "^3.0.0",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-pager-view": "^5.1.8"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

升级到2021年9月2日，与react-navigation组件结合后的package.json

{
  "name": "rn04",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/react-native": "^4.2.0",
    "@react-native-async-storage/async-storage": "^1.15.7",
    "@react-native-community/cameraroll": "^4.0.4",
    "@react-native-community/checkbox": "^0.5.8",
    "@react-native-community/segmented-control": "^2.2.2",
    "@react-native-community/slider": "^4.1.6",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "fbjs": "^3.0.0",
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-dropdown-picker": "^5.1.23",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-pager-view": "^5.4.1",
    "react-native-radio-buttons-group": "^2.2.5",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}