Skip to content

Commit

Permalink
init: fix intro docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@warmhug
warmhug committed Jun 5, 2018
1 parent 746ccac commit 236faf8
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 822 deletions.
15 changes: 11 additions & 4 deletions CHANGELOG.en-US.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
---
order: 2
title: Change Log
timeline: true
toc: false
---

`antd-mobile` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).
`antd-mobile-rn` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).

#### Release Schedule

Expand All @@ -15,6 +14,14 @@ toc: false

---

### 2.1.11 and before
### 2.2.0

[antd-mobile change log](https://github.com/ant-design/ant-design-mobile/blob/master/CHANGELOG.en-US.md#2111)
`2018-06-19`

- split the antd-mobile react native code to `antd-mobile-rn` package.

### 2.1.11

`2018-05-31`

[antd-mobile@2.1.11 and before change log](https://github.com/ant-design/ant-design-mobile/blob/master/CHANGELOG.en-US.md#2111)
15 changes: 11 additions & 4 deletions CHANGELOG.zh-CN.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
---
order: 2
title: 更新日志
timeline: true
toc: false
---

`antd-mobile` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
`antd-mobile-rn` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。

#### 发布周期

Expand All @@ -15,8 +14,16 @@ toc: false

---

### 2.1.11 及以前
### 2.2.0

[antd-mobile 更新日志](https://github.com/ant-design/ant-design-mobile/blob/master/CHANGELOG.en-US.md#2111)
`2018-06-19`

- 拆分 antd-mobile react native 代码到 `antd-mobile-rn` 包.

### 2.1.11

`2018-05-31`

- [antd-mobile@2.1.11 及以前更新日志](https://github.com/ant-design/ant-design-mobile/blob/master/CHANGELOG.en-US.md#2111)


131 changes: 21 additions & 110 deletions docs/react/introduce.en-US.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
order: 0
title: Ant Design Mobile of React
title: Ant Design Mobile RN of React
---

`antd-mobile` is the React implementation of the [Ant Design](http://ant.design)'s mobile specification, serving the ant and koubei wireless service.
`antd-mobile-rn` is the React implementation of the [Ant Design](http://ant.design)'s mobile specification, serving the ant and koubei wireless service.

<div class="pic-plus">
<img width="160" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
Expand All @@ -29,7 +29,7 @@ title: Ant Design Mobile of React
## Features and Advantages

- The UI is fully Configurable and Scalable, easily adapt to all kinds of product style.
- Support Web / iOS / Android platform (Based on React Native), has a wealth of components, can fully cover all kinds of scenes.
- Support Web / iOS / Android platform (Based on React Native), has a wealth of components, can fully cover all kinds of scenes. (antd-mobile)
- Provide "Components are loaded on demand" / "Web page HD display" / "SVG Icon" optimization features, integrated development.
- Use TypeScript to develop, provide type definition files, support type and attribute smart tips for easy business development.
- Fully compatible with react / preact.
Expand All @@ -48,109 +48,27 @@ title: Ant Design Mobile of React
### 1. Create a New Project

Can be an existing project, or a newly created empty project with [dva](https://github.com/dvajs/dva) / create-react(-native)-app, you can also copy and modify from the official example [scaffolding](https://github.com/ant-design/antd-mobile-samples/tree/master/rn-web).
Can be an existing project, or a newly created empty project with create-react-native-app, you can also copy and modify from the official example [scaffolding](https://github.com/ant-design/antd-mobile-samples/tree/master/rn-web).

> More official [examples](https://github.com/ant-design/antd-mobile-samples).
> Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in React ecosystem.
The complete procedure please check the document here: [antd-mobile-sample/create-react-native-app](https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app)

### 2. Installation

```bash
$ npm install antd-mobile --save
$ npm install antd-mobile-rn --save
```

### 3. Usage

#### Web usage

Entry html page settings:

> Add [FastClick](https://github.com/ftlabs/fastclick) and set the html `meta` (more ref [#576](https://github.com/ant-design/ant-design-mobile/issues/576))
>
> Use Promise fallback support (some Android phones do not support Promise)
```html
<!DOCTYPE html>
<html>
<head>
<!-- set `maximum-scale` for some compatibility issues -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body></body>
</html>
```

Example of usage:

```jsx
import { Button } from 'antd-mobile';
ReactDOM.render(<Button>Start</Button>, mountNode);
```

And import stylesheets manually:

```jsx
import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'
```

##### Use modularized antd-mobile

**Note: Strongly recommended.**

The following two ways used to load the **only components you used**, select one of the ways you like.

- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)

```js
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` for less
]
}
```

This allows you to import components from antd-mobile without having to manually import the corresponding stylesheet. The babel plugin will automatically import stylesheets.

```jsx
// import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from 'antd-mobile';
```

- Manually import

```jsx
import DatePicker from 'antd-mobile/lib/date-picker'; // for js
import 'antd-mobile/lib/date-picker/style/css'; // for css
// import 'antd-mobile/lib/date-picker/style'; // that will import less
```

##### More enhanced (optional):

> Your custom UI library based on antd-mobile: [web-custom-ui](https://github.com/ant-design/antd-mobile-samples/tree/master/web-custom-ui) / [web-custom-ui-pro](https://github.com/ant-design/antd-mobile-samples/tree/master/web-custom-ui-pro)

#### React-Native usage

> Note: `Menu`/`NavBar`/`Range` does not have React-Native implementation.
Example of usage:

```jsx
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from 'antd-mobile/lib/button';
import Button from 'antd-mobile-rn/lib/button';

class HelloWorldApp extends Component {
render() {
Expand All @@ -161,7 +79,7 @@ class HelloWorldApp extends Component {
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
```

##### Use modularized antd-mobile
##### Use modularized antd-mobile-rn

The following two ways used to load the **only components you used**, select one of the ways you like.

Expand All @@ -171,39 +89,38 @@ The following two ways used to load the **only components you used**, select one
// .babelrc or babel-loader option
{
"plugins": [
["import", { libraryName: "antd-mobile" }] // The difference with the Web platform is that you do not need to set the style
["import", { libraryName: "antd-mobile-rn" }] // The difference with the Web platform is that you do not need to set the style
]
}
```

Then just change the way of import modules from antd-mobile.
Then just change the way of import modules from antd-mobile-rn.

```jsx
import { Button } from 'antd-mobile';
import { Button } from 'antd-mobile-rn';
```

> Note: Some people reflected that it would be [unable to resolve module `react-dom`](https://github.com/ant-design/ant-design-mobile/issues/2054) in a project created with `react-native init`. If you encounter the same problem, you might try to install [babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver).
- Manually import

```jsx
import Button from 'antd-mobile/lib/button';
import Button from 'antd-mobile-rn/lib/button';
```

##### More enhanced (optional):

> [Custom theme and single component style](https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui)
> [Custom theme and single component style](https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui#antd-mobile-with-rn-custom-ui)
> Like [#1853](https://github.com/ant-design/ant-design-mobile/issues/1853)
## Version

- Stable: [![npm package](http://img.shields.io/npm/v/antd-mobile.svg?style=flat-square)](http://npmjs.com/package/antd-mobile)
- Next: [![npm package](https://img.shields.io/npm/v/antd-mobile/next.svg)](http://npmjs.com/package/antd-mobile)
- Stable: [![npm package](http://img.shields.io/npm/v/antd-mobile-rn.svg?style=flat-square)](http://npmjs.com/package/antd-mobile-rn)
- Next: [![npm package](https://img.shields.io/npm/v/antd-mobile-rn/next.svg)](http://npmjs.com/package/antd-mobile-rn)

## Size

- Components are loaded on demand, in other words, components that are not imported are not packed.
- <p><a href="https://ant-design.github.io/ant-design-analysis/" target="_blank">The size and dependency analysis</a> of `./dist/antd-mobile.min.js`</p>

## Environment Support

Expand All @@ -212,27 +129,21 @@ The following two ways used to load the **only components you used**, select one

## Links

- [Home Page](https://mobile.ant.design/)
- [Developer Instruction](http://github.com/ant-design/ant-design-mobile/blob/master/development.en-US.md)
- [Home Page](https://mobile-rn.ant.design/)
- [Developer Instruction](http://github.com/ant-design/ant-design-mobile-rn/blob/master/development.en-US.md)
- [React components](http://github.com/react-component)

## Companies using antd-mobile

- [Ant Financial](http://www.antgroup.com/index.htm?locale=en_US)
- [Alibaba](http://www.alibaba.com/)
- [Koubei](http://www.koubei.com/)

## Contributing

Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design-mobile/blob/master/.github/CONTRIBUTING.md) first.
Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design-mobile-rn/blob/master/.github/CONTRIBUTING.md) first.

If you'd like to help us improve antd-mobile, just create a [Pull Request](https://github.com/ant-design/ant-design-mobile/pulls). Feel free to report bugs and issues [here](https://github.com/ant-design/ant-design-mobile/issues/new).
If you'd like to help us improve antd-mobile-rn, just create a [Pull Request](https://github.com/ant-design/ant-design-mobile-rn/pulls). Feel free to report bugs and issues [here](https://github.com/ant-design/ant-design-mobile-rn/issues/new).

> If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
## Need Help?

For questions on how to use antd, please post questions to [stackoverflow](http://stackoverflow.com/questions/tagged/antd) using the `antd`/`antd-mobile` tag. If you're not finding what you need on stackoverflow, you can find us on [gitter](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) as well.
For questions on how to use antd, please post questions to [stackoverflow](http://stackoverflow.com/questions/tagged/antd) using the `antd`/`antd-mobile-rn` tag. If you're not finding what you need on stackoverflow, you can find us on [gitter](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) as well.

As always, we encourage experienced users to help those who are not familiar with `antd`!

Expand Down
Loading

0 comments on commit 236faf8

Please sign in to comment.