Skip to content

Commit 5d020ca

Browse files
silentcloudparanoidjk
silentcloud
authored and
paranoidjk
committed
add doc for create-react(-native)-app, ref #1362 (#1395)
* add doc for create-react-app, ref #1362 * update web
1 parent 9d22319 commit 5d020ca

File tree

2 files changed

+367
-0
lines changed

2 files changed

+367
-0
lines changed

‎docs/react/use-with-create-react-app.en-US.md

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
---
2+
order: 3
3+
title: Use in create-react(-native)-app
4+
---
5+
6+
[create-react-app](https://github.com/facebookincubator/create-react-app) (Web project) / [create-react-native-app](https://github.com/react-community/create-react-native-app)(React Native project) is one of best React application development tool, we are going to use `antd-mobile` within it；
7+
8+
## Install and Initialization
9+
10+
We need to install the appropriate tools first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
11+
12+
```bash
13+
$ npm install -g yarn
14+
$ npm install -g create-react-app (web project)
15+
$ npm install -g create-react-native-app (react-native project)
16+
```
17+
18+
Then we create a new project named antm-demo.
19+
20+
```bash
21+
$ create-react-app antm-demo (web project)
22+
$ create-react-native-app antm-demo (react-native project)
23+
```
24+
25+
The tool will create and initialize environment and dependencies automaticly, please try config your proxy setting or use other npm registry if any network errors happen during it.
26+
27+
Then we go inside antm-demo and start it.
28+
29+
```bash
30+
$ cd antm-demo
31+
$ yarn start
32+
```
33+
34+
- `Web project`: Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
35+
- `React Native project`: Run `npm run ios` in terminal, it should be ok if you can see the page content in simulator.
36+
37+
## Import antd-mobile
38+
39+
First we install antd-mobile and [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)(A babel plugin for importing components on demand [principle](https://github.com/ant-design/ant-design/blob/master/docs/react/getting-started#Import-on-Demand)) from yarn or npm.
40+
41+
```bash
42+
$ yarn add antd-mobile
43+
$ yarn add babel-plugin-import --dev
44+
```
45+
46+
- ### Web project
47+
48+
1. Modify `config/webpack.config.dev.js`
49+
50+
```js
51+
extensions: ['.web.js', '.js', '.json', '.jsx'],
52+
...
53+
rules: [
54+
{
55+
exclude: [
56+
...
57+
/\.less$/,
58+
...
59+
]
60+
},
61+
...
62+
// Process JS with Babel.
63+
{
64+
test: /\.(js|jsx)$/,
65+
...
66+
options: {
67+
plugins: [
68+
['import', { libraryName: 'antd-mobile', style: true }],
69+
],
70+
cacheDirectory: true,
71+
}
72+
},
73+
...
74+
// It is generally necessary to use the Icon component, need to configure svg-sprite-loader
75+
{
76+
test: /\.(svg)$/i,
77+
loader: 'svg-sprite-loader',
78+
include: [
79+
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. svg files of antd-mobile
80+
// path.resolve(__dirname, 'src/my-project-svg-foler'), // folder of svg files in your project
81+
]
82+
},
83+
{
84+
test: /\.less$/,
85+
use: [
86+
require.resolve('style-loader'),
87+
require.resolve('css-loader'),
88+
{
89+
loader: require.resolve('postcss-loader'),
90+
options: {
91+
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
92+
plugins: () => [
93+
autoprefixer({
94+
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
95+
}),
96+
pxtorem({ rootValue: 100, propWhiteList: [] })
97+
],
98+
},
99+
},
100+
{
101+
loader: require.resolve('less-loader'),
102+
options: {
103+
modifyVars: { "@primary-color": "#1DA57A" },
104+
},
105+
},
106+
],
107+
}
108+
]
109+
```
110+
> Note, we only modified webpack.config.dev.js now, if you wish this config working on production environment, you need to update webpack.config.prod.js as well.
111+
112+
2. Entry html page Required settings:
113+
114+
- Use HD program settings, see [antd-mobile-0.8-以上版本「高清」方案设置](https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE) for details.
115+
- Use [FastClick](https://github.com/ftlabs/fastclick), ref [#576](https://github.com/ant-design/ant-design-mobile/issues/576)
116+
- Use Promise fallback support (some Android phones do not support Promise), as follows:
117+
118+
```js
119+
if(!window.Promise) {
120+
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
121+
}
122+
```
123+
124+
- ### React Native project
125+
126+
1. Modify the `.babelrc` config, then restart the service.
127+
128+
```json
129+
{
130+
"presets": ["babel-preset-expo"],
131+
"plugins": [["import", { "libraryName": "antd-mobile" }]],
132+
"env": {
133+
...
134+
}
135+
}
136+
```
137+
2. Modify the `App.js` file, import `Button` component from antd-mobile.
138+
139+
```js
140+
...
141+
import { Button } from 'antd-mobile';
142+
143+
...
144+
render() {
145+
return (
146+
...
147+
<Button>antd-mobile button</Button>
148+
...
149+
);
150+
}
151+
```
152+
153+
## Customize Theme
154+
155+
- ### Web project
156+
157+
Please see: [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)
158+
159+
- ### React Native project
160+
161+
1. Create `theme.js` file in the project root, overwrite the theme variables that you want to change, eg:
162+
163+
```js
164+
module.exports = {
165+
brand_primary: 'red',
166+
color_link: 'red',
167+
border_color_base: 'green',
168+
};
169+
```
170+
2. Create `scripts/custom-rn-theme.js` file in the project root, copy the contents of [rn-custom-ui/scripts/custom-rn-theme.js](https://github.com/ant-design/antd-mobile-samples/blob/master/rn-custom-ui/scripts/custom-rn-theme.js) to `scripts/custom-rn-theme.js`.
171+
172+
3. Modify the `start` script in `package.json` like this:
173+
174+
```json
175+
"scripts": {
176+
...
177+
"start": "node scripts/custom-rn-theme && react-native-scripts start",
178+
...
179+
}
180+
181+
Then restart the service.
182+
183+
> Note: if you want to overwrite some styles for a single component, please see [ant-design-mobile/issues/1174](https://github.com/ant-design/ant-design-mobile/issues/1174#issuecomment-295256831) (currently support 1.x verion)

‎docs/react/use-with-create-react-app.zh-CN.md

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
---
2+
order: 3
3+
title: 在 create-react(-native)-app 中使用
4+
---
5+
6+
[create-react-app](https://github.com/facebookincubator/create-react-app) (Web 项目) / [create-react-native-app](https://github.com/react-community/create-react-native-app)(React Native 项目) 是业界最优秀的 React 相关应用开发工具之一，本文档尝试以此工具来使用 antd-mobile 组件；
7+
8+
## 安装和初始化
9+
10+
首先我们需要在命令行中安装相应工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
11+
12+
```bash
13+
$ npm install -g yarn
14+
$ npm install -g create-react-app (web 项目)
15+
$ npm install -g create-react-native-app (react-native 项目)
16+
```
17+
18+
然后新建一个项目。
19+
20+
```bash
21+
$ create-react-app antm-demo (web 项目)
22+
$ create-react-native-app antm-demo (react-native 项目)
23+
```
24+
25+
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
26+
27+
然后我们进入项目并启动。
28+
29+
```bash
30+
$ cd antm-demo
31+
$ yarn start
32+
```
33+
34+
- `Web 项目`：此时浏览器访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
35+
- `React Native 项目`：运行 `npm run ios` 能在模拟器中打开页面就算成功了。
36+
37+
## 引入 antd-mobile
38+
39+
首先从 yarn 或 npm 安装并引入 antd-mobile 和 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（一个用于按需加载组件代码和样式的 babel 插件（[原理](https://github.com/ant-design/ant-design/blob/master/docs/react/getting-started#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)））
40+
41+
```bash
42+
$ yarn add antd-mobile
43+
$ yarn add babel-plugin-import --dev
44+
```
45+
46+
- ### Web 项目
47+
48+
49+
1. 修改 `config/webpack.config.dev.js`
50+
51+
```js
52+
extensions: ['.web.js', '.js', '.json', '.jsx'],
53+
...
54+
rules: [
55+
{
56+
exclude: [
57+
...
58+
/\.less$/,
59+
...
60+
]
61+
},
62+
...
63+
// Process JS with Babel.
64+
{
65+
test: /\.(js|jsx)$/,
66+
...
67+
options: {
68+
plugins: [
69+
['import', { libraryName: 'antd-mobile', style: true }],
70+
],
71+
cacheDirectory: true,
72+
}
73+
},
74+
...
75+
// It is generally necessary to use the Icon component, need to configure svg-sprite-loader
76+
{
77+
test: /\.(svg)$/i,
78+
loader: 'svg-sprite-loader',
79+
include: [
80+
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. svg files of antd-mobile
81+
// path.resolve(__dirname, 'src/my-project-svg-foler'), // folder of svg files in your project
82+
]
83+
},
84+
{
85+
test: /\.less$/,
86+
use: [
87+
require.resolve('style-loader'),
88+
require.resolve('css-loader'),
89+
{
90+
loader: require.resolve('postcss-loader'),
91+
options: {
92+
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
93+
plugins: () => [
94+
autoprefixer({
95+
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
96+
}),
97+
pxtorem({ rootValue: 100, propWhiteList: [] })
98+
],
99+
},
100+
},
101+
{
102+
loader: require.resolve('less-loader'),
103+
options: {
104+
modifyVars: { "@primary-color": "#1DA57A" },
105+
},
106+
},
107+
],
108+
}
109+
]
110+
```
111+
> 注意，上述示例只修改了 webpack.config.dev.js，如果需要在生产环境生效，你需要同步修改 webpack.config.prod.js。
112+
113+
2. 入口页面必需的设置：
114+
115+
- 引入『高清方案』设置：具体方法见 wiki 里 [antd-mobile-0.8-以上版本「高清」方案设置](https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE)。
116+
- 引入 [FastClick](https://github.com/ftlabs/fastclick), 关联 [#576](https://github.com/ant-design/ant-design-mobile/issues/576)
117+
- 引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)，示例代码如：
118+
119+
```js
120+
if(!window.Promise) {
121+
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
122+
}
123+
```
124+
125+
- ### React-Native 项目
126+
127+
- 修改 `.babelrc` 配置，并重新启动服务
128+
129+
```json
130+
{
131+
"presets": ["babel-preset-expo"],
132+
"plugins": [["import", { "libraryName": "antd-mobile" }]],
133+
"env": {
134+
...
135+
}
136+
}
137+
```
138+
- 修改 `App.js`, 引入 antd-mobile 按钮组件。
139+
140+
```js
141+
...
142+
import { Button } from 'antd-mobile';
143+
144+
...
145+
render() {
146+
return (
147+
...
148+
<Button>antd-mobile button</Button>
149+
...
150+
);
151+
}
152+
```
153+
154+
## 自定义主题
155+
156+
- ### Web 项目
157+
158+
请查看 [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) 项目
159+
160+
- ### React-Native 项目：
161+
162+
1. 在项目根目录创建 `theme.js` 文件，并覆盖你要改写的变量值，eg：
163+
164+
```js
165+
module.exports = {
166+
brand_primary: 'red',
167+
color_link: 'red',
168+
border_color_base: 'green',
169+
};
170+
```
171+
2. 项目根目录下创建 `scripts/custom-rn-theme.js` 文件，文件内容 copy [rn-custom-ui/scripts/custom-rn-theme.js](https://github.com/ant-design/antd-mobile-samples/blob/master/rn-custom-ui/scripts/custom-rn-theme.js) 该文件内容即可；
172+
173+
3. 改写 `package.json` 中 `start` 命令如下：
174+
175+
```json
176+
"scripts": {
177+
...
178+
"start": "node scripts/custom-rn-theme && react-native-scripts start",
179+
...
180+
}
181+
```
182+
重新执行 `npm start`。
183+
184+
> Note: 单个组件改写部分样式的方法可以参考： [ant-design-mobile/issues/1174](https://github.com/ant-design/ant-design-mobile/issues/1174#issuecomment-295256831)， 目前 1.x 支持

0 commit comments

Comments
 (0)