Ant-design-mobile: react-native init 如何最简使用antd-mobile

[roytan883]

在手机上永远提示“unknown named module：antd-mobile”？ 怎么破？ github上无数issues都是说这个问题，但是找不到一个官方回答可以让RN在手机上面跑起来的，然后各种答案都有。加main.js，用什么按需加载的，什么rc配置的。统统都是一句话。然后无数人问，就没有一个回答是能解决问题的。。。

官方能不能写一个最简说明？ 能否提示一下怎么在react-native init myapp以后，最简化使用antd-mobile

不要告诉我参见https://github.com/ant-design/antd-init/tree/master/boilerplates/MobileDemo

这demo又是搞一个超大全家桶，npm都安装半天，react-native init出来的一会儿就安装完了。已经使用taobao npm。而且这个demo搞半天也没有写明白到底web怎么配置，RN怎么配置

https://github.com/ant-design/babel-plugin-import也是坑，怎么加载，加在哪里，怎么和react native官网工具配合不写。试了无数次 react-native start但是总是说unknown。

就想最简单使用react-native start可以用而已，能否给一个最简说明，不带全家桶的？

[zhanyingf15]

我也遇到同样的问题了

[roytan883]

目前按照官网做，根本就跑不起来！！！
我是这样的react-native init myapp，编译apk，安装，react-native start启动RN官方的packager，在真机上跑起来hello world以后，才添加的antd-mobile

然后坑就来了，先按照官网的：
npm install antd-mobile --save
然后
// .babelrc {"plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]]}
，重新react-native start，结果就提示“unknown named module：antd-mobile”
然后再继续按照官方的npm install babel-plugin-import --save-dev点用没有。。。
然后把MobileDemo里面的webpack.config.js拷贝过来，还是没用。
现在只有一件事没有做了，就是demo里面的这堆不想要的东西：

    "dora": "0.4.x",
    "dora-plugin-livereload": "^0.5.0",
    "dora-plugin-proxy": "^0.8.5",
    "dora-plugin-webpack": "^0.8.1",
    "eslint": "^2.12.0",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.4.2",
    "eslint-plugin-react": "^5.1.1",
    "expect": "^1.20.1",
    "postcss-pxtorem": "^3.3.1",
    "pre-commit": "1.x"

[roytan883]

还是说目前不支持react-native start 使用RN官方packager？？？

[afc163]

import Button from 'antd-mobile/lib/button'; 找不到模块的话建议直接这么写，现在 antd-mobile 没有设置入口文件。

ref #602

[roytan883]

无数次尝试以后，发现是demo的版本问题，我开始是把官方demo中的配置copy过来
"babel-plugin-import": "~1.0.1", "babel-plugin-transform-runtime": "^6.8.0",
结果怎么都不工作，最终我用 npm install babel-plugin-import@latest 搞定。。。
发现是1.1.0版本就OK
其实就只是改两个地方就OK，但是就没人能写一个清楚的出来供新人使用，这里我贴出来：

• 一：修改项目目录下的package.json

  "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>

哎。。。就多写几句就能让新人快速上手的东西。。。没人愿意写。。总共不要5分钟就能写完。。。

[zhanyingf15]

@roytan883 按照你上面的配置，成功运行了哈，有个一个地方需要修改下，如果只是针对react-native的话，不要react-dom，就需要把["transform-runtime", {"polyfill": false, "regenerator": true}]这一句去掉，不然真机环境上还是会报错

[zhanyingf15]

一个新的问题出现了，ant-mobile有些库在rn0.39上有BUG，降级到0.35后就没法装babel-plugin-import了

[warmhug]

rn 版本跟 babel-plugin-import 有什么关系

[roytan883]

@zhanyingf15
已经弃坑，等1.0发了再考虑antd-mobile了，你可以看看nativebase，导入很简单

npm install native-base --save
react-native link react-native-vector-icons

两句命令搞定

[flyjennyetn]

@roytan883 你好 nativebase 支持web吗？ 请问你的Q多少 可以后期交流请假些问题吗

[silentcloud]

步骤：

1. react-native init
2. npm install antd-mobile@xxx -S
3. npm install babel-plugin-import -SD
4. add "plugins": [["import", { "libraryName": "antd-mobile" }]] to .babelrc file

[roytan883]

官方demo
https://github.com/ant-design/antd-init/tree/master/boilerplates/MobileDemo
依赖的是"babel-plugin-import": "~1.0.1"，需要1.1.0才行，建议官方处理一下。

很多issue的回复里面官方都是一句话让大家参考这个demo，然而这个demo又是个坑，导致很多人照着上手都失败。

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.