introduce.zh-CN.md

order	title
0	Ant Design Mobile RN of React

@ant-design/react-native 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。

+

<style> .pic-plus > * { display: inline-block; vertical-align: middle; } .pic-plus { margin: 40px 0; } .pic-plus span { font-size: 30px; color: #aaa; margin: 0 40px; } </style>

特性和优势

• UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
• 基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景 (antd-mobile)
• 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案，一体式开发
• 使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发
• 全面兼容 react

适用场景

• 适合于中大型产品应用
• 适合于基于 react-native 的多终端应用
• 适合不同 UI 风格的高度定制需求的应用

快速上手

在开始之前，推荐先学习 React 和 ES2015。我们使用了 babel，试试用 ES2015 的写法来提升编码的愉悦感。

确认 Node.js 已经升级到 v4.x 或以上。

1. 创建一个项目

可以是已有项目，或者是使用 create-react-native-app 新创建的空项目，你也可以从 官方示例 脚手架里拷贝并修改

参考更多官方示例集 或者你可以利用 React 生态圈中的 各种脚手架

完整步骤请查看此处文档： antd-mobile-sample/create-react-native-app

2. 安装

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

or

yarn add @ant-design/react-native

链接字体图标

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

如果你用的是 expo 请确保字体已经加载完成再初始化 app

import { AppLoading, Font } from 'expo';
...
...
class App extends React.Component {
  state = {
    theme: null,
    currentTheme: null,
    isReady: false,
  };
  changeTheme = (theme, currentTheme) => {
    this.setState({ theme, currentTheme });
  };
  async componentDidMount() {
    await Font.loadAsync(
      'antoutline',
      // eslint-disable-next-line
      require('@ant-design/icons-react-native/fonts/antoutline.ttf')
    );

    await Font.loadAsync(
      'antfill',
      // eslint-disable-next-line
      require('@ant-design/icons-react-native/fonts/antfill.ttf')
    );
    // eslint-disable-next-line
    this.setState({ isReady: true });
  }
  render() {
    const { theme, currentTheme, isReady } = this.state;
    if (!isReady) {
      return <AppLoading />;
    }
    return (
      <Provider theme={theme}>
        <RootNavigator
          screenProps={{ changeTheme: this.changeTheme, currentTheme }}
        />
      </Provider>
    );
  }
}

当你使用expo sdk32以上版本时已经弃用了下面这种写法

import { Font } from 'expo';

转而使用单独命名的

import * as Font from 'expo-font';

3. 使用

组件使用实例：

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from '@ant-design/react-native/lib/button';

class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

如果需要使用Modal以及Toast还需要在 App 的入口处加上Provider

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Button, Provider, Toast } from '@ant-design/react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Provider>
        <Button onPress={() => Toast.info('This is a toast tips')}>
          Start
        </Button>
      </Provider>
    );
  }
}

按需加载

下面两种方式都可以只加载用到的组件，选择其中一种方式即可。

• 使用 babel-plugin-import（推荐）。

  // .babelrc or babel-loader option
  {
    "plugins": [
      ["import", { libraryName: "@ant-design/react-native" }] // 与 Web 平台的区别是不需要设置 style
    ]
  }

  然后改变从 @ant-design/react-native 引入模块方式即可。

  import { Button } from '@ant-design/react-native';

  说明：有人反映通过 react-native init 创建的项目在使用时可能会报 Unable to resolve module react-dom 的错误 ，此时不妨安装 babel-plugin-module-resolver 试试~

• 手动引入

  import Button from '@ant-design/react-native/lib/button';

更多增强 (非必须):

自定义 RN 主题和单个组件样式 比如 #1853

版本

• 稳定版：
• 开发版：

链接

• 首页
• 开发者文档
• React 模块

如何贡献

在任何形式的参与前，请先阅读 贡献者文档。有任何建议或意见您可以 Pull Request，给我们 报告 Bug。

强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》，更好的问题更容易获得帮助。

社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 antd/antd-mobile-rn 标签。

1. Stack Overflow（推荐）
2. Segment Fault
3.