Ant-design-mobile: 提供上手文档

[afc163]

按傻瓜式的步骤跑通最简单的页面。用以解决『找不到模块』『样式未加载』『按需加载失效』『我的组件为什么这么大』等常见问题。

相关 issue：#366 #363 #360 #352 （十个有五个都是这种问题，用户都在门外进不来）

目标是设计师都能跑通流程。

• [ ] web 版本
• [ ] ios 版本
• [ ] android 版本

---

现有的脚手架：#56

[leilihuang]

@afc163
antd-mobile也可以用antd-init创建么

[silentcloud]

getting-started 最好是纯粹的东西，不要包含 ant-tools 里的工具

[Wanghai964576399]

我也是这样 ios版本 运行是提示找不到 antd-mobile 这个 但是在我的项目里 node_modules这个文件下是有这个 antd-mobile 这个东西的 请问有人解决这个问题了吗？

[leilihuang]

@Wanghai964576399 https://github.com/leilihuang/react-H5
我这个是我踩了好多坑，搭建的，你可以看看

[PokimLee]

确实啊，刚想用结果发现门都进不去，有点束手无策

[ocylib]

既然说到上手，能不能麻烦如何用typescript写RN也做下祥细介绍呢，如开发环境搭建等。官方的组件就是用typescript写的。对我这样新手来说RN意味着要用jsx，输出相对简单。而typescript传说比纯js写起来高效。希望jsx出界面，typescript写逻辑，本来对这两个就不熟，两个混写怎么搞，虽然最终都是js.

[forwk1990]

和国际的互联网巨头差距还是很大，特别是文档这块，别人的开源项目都是直接一步到位直接上手，如果特别麻烦都会有例子程序，国内的总会有这问题那问题，整到最后总给人一种开源其实是要大家帮忙找bug的。

[afc163]

👍

[afc163]

• [x] https://mobile.ant.design/docs/react/practical-projects 这个例子真的有本地试过么，高清方案都没有提到。

[PokimLee]

这个项目会不会因为把iOS、Android和Web混在一起导致很多问题的产生？分开会不会好一点？说实话ant-design挺好用的，希望mobile版本能保持使用的一致性，和保持同时兼容。

[warmhug]

@PokimLee 纯 web 版项目 demo 示例：https://github.com/ant-design/ant-design-mobile/issues/56#issuecomment-263311939

[afc163]

参照 https://github.com/ant-design/ant-design/pull/4294

现在的文档太简陋了，用户非常痛苦 #654，需要提供从空白配置一步一步跑起项目的上手文档。

[roytan883]

我提供一个我刚刚写完的android react native antd-mobile上手文档：

一：按照react native官网安装让hello world在手机上跑起来

二：安装antd-mobile

• 修改项目目录下的package.json，并安装一下缺失的npm包：

  "dependencies": {
    "antd-mobile": "^0.9.12",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-native": "0.39.2"
  },
  "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-plugin-import": "^1.1.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-react-native": "^1.9.1",
    "jest": "18.0.0",
    "react-test-renderer": "15.4.1"
  },

• 修改项目目录下的.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    ["import", {"libraryName": "antd-mobile"}],
    ["transform-runtime", {"polyfill": false, "regenerator": true}]
  ]
}

• 代码index.android.js中使用

import { Button } from 'antd-mobile';
<Button type="primary">Start</Button>

三：react-native start启动packager，手机上Reload菜单重载js文件