升级指南

此处着重列出升级中的不兼容变化和推荐改动。所有变动请见 Changelog。

5.2.1

安装 peer 依赖

npm install @ant-design/icons-react-native react-native-gesture-handler react-native-reanimated

or

yarn add @ant-design/icons-react-native react-native-gesture-handler react-native-reanimated

5.1.0

安装 peer 依赖

npm install @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler

or

yarn add @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler

在项目的根目录下，入口文件(通常是App.js)文件中需要引入这句：

import 'react-native-gesture-handler';

5.0.3

安装 peer 依赖

npm install @react-native-camera-roll/camera-roll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler

or

yarn add @react-native-camera-roll/camera-roll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler

4.2.0

安装 peer 依赖

npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view react-native-gesture-handler

or

yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view react-native-gesture-handler

4.1.0

升级到 4.0.0+需要安装 peer 依赖然后 link

npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view

or

yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view

安装完依赖后需要到 iOS 目录 pod install(auto linking)，Android 不需要手动处理

链接字体图标

# 手动链接字体图标
npx react-native link

3.0.0

3.0.0开始需要安装 react-native@0.57.x

• 修改之前的 import 方式改成 import { Button, ... } from '@ant-design/react-native

• 多语言以及主题，由之前的 LocaleProvider 改成Provider，现在的Provider 支持theme跟locale，Provider 必须在 app 入口指定，不然部分组件用不了（因为现在支持多个 Modal 以及在 Modal 上面显示 Toast）

• Provider 配置

  // 动态主题配置可以查看 ./rn-kitchen-sink/app.js
  const RootNavigator = createStackNavigator(scenes);
  class App extends React.Component {
    state = {
      theme: null,
      currentTheme: null,
    };
    changeTheme = (theme, currentTheme) => {
      this.setState({ theme, currentTheme });
    };
    render() {
      const { theme, currentTheme } = this.state;
      return (
        <Provider theme={theme}>
          <RootNavigator
            screenProps={{ changeTheme: this.changeTheme, currentTheme }}
          />
        </Provider>
      );
    }
  }

• 样式重写

  • 通过 Provider 的 theme 配置默认的全局主题样式

  • 通过组件的 styles 覆盖局部组件样式，不需要导入当前组件的所有样式

  • 不需要像 2.x 那样导入一个样式文件，现在的样式文件返回的是一个 function 而不是一个对象了

• Toast 移除了 hide 方法

• 修改Grid的onClick属性为onPress

• Link Icon Fonts

  react-native link @ant-design/icons-react-native

  如果你使用的是 react-native@0.60.x 会自动 link，如需手动 link 请使用

  react-native link @ant-design/react-native

2.1.11 and before

antd-mobile upgrade-notes