ant-design / antd-mobile-samples Goto Github PK
View Code? Open in Web Editor NEWantd-mobile samples
antd-mobile samples
进入rn-expo
yarn start
expo 应用能运行起来,不过app一直停留在logo界面。
在android 4.0 ,4.3下都是显示空白,其他高版本和苹果ios没有问题。
在roadhog 和dva 组合的脚手架下也是出现同样问题。
望提示!急急!在线等。。。。。
datepick work so slowly on android mx5 5.1 , react-native do bad.
web-roadhog 專案內的 public/index.html 裡面動態設定 viewport . 造成 iframe 內容被縮放.
參考其他整合 antd-mobile 2.0 沒有設定 viewport 的腳本
是否可以做調整
webpack.config.dev.js (path: node_modules/react-scripts/config);should i modify it?
本例的package.json文件看到下面信息:
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-runtime": "^6.9.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.12.0",
"less-vars-to-js": "^1.1.2",
"postcss-pxtorem": "^4.0.0",
"redbox-react": "^1.3.2",
"roadhog": "^0.6.0-beta1"
}
我是全局安装roadhog
因此当前项目的package.json文件里就没有 "roadhog": "^0.6.0-beta1"
这一行
似乎感觉没有什么影响
git clone https://github.com/ant-design/antd-mobile-samples
cd create-react-app
yarn install
yarn start
Module build failed: Error: Cannot find module 'less'
why?
rn-custom-ui/scripts 会直接修改node_module里的style/theme/default.js.
I got:
Error: 'assets/icons/app.png' could not be found, because 'assets/icons' is not a subdirectory of any of the roots ('E:\Downloads\antd-mobile-samples-master\rn-expo')
at Promise.all.then.stats (E:/Downloads/antd-mobile-samples-master/rn-expo/node_modules/react-native/packager/src/AssetServer/index.js:181:13)
13:11:50
Error: 'assets/icons/loading.png' could not be found, because 'assets/icons' is not a subdirectory of any of the roots ('E:\Downloads\antd-mobile-samples-master\rn-expo')
at Promise.all.then.stats (E:/Downloads/antd-mobile-samples-master/rn-expo/node_modules/react-native/packager/src/AssetServer/index.js:181:13)
13:11:50
Building JavaScript bundle: error
Unable to resolve module ../../../../App
from E:\Downloads\antd-mobile-samples-master\rn-expo\node_modules\react-native-scripts\build\bin\crna-entry.js
: Directory E:\Downloads\antd-mobile-samples-master\rn-expo\App doesn't exist
React 16 has changed to bundle with rollup, for a smaller file size and runtime performance:
React now uses Rollup to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins.
However, as we all know, rollup configuration is painful, and some rc-components is not really friendly to rollup, even React changes the source code to workaround rollup bug. So, maybe a rollup sample is required.
BTW. React seems to prepare to add an es version, and then a rollup sample of antd-mobile will be a little bit easier.
必须要用expo么?怎么单独引入antd-mobile?
想请问下1.X的分支下的create-react-app demo是不能用了吗?是run eject之后的配置法。加入自定义主题会编译失败,试了多次都不行。
报错:
Failed to compile.
./node_modules/antd-mobile/lib/icon/style/index.less
Module build failed:
'use strict';
^
Unrecognised input
in E:\react\antd-mobile-samples\create-react-app\node_modules\antd-mobile\lib\style\themes\default.js (line 1, column 0)
Please, update your example so it works with latest version of create-react-app utility.
antd-mobile 目前使用的 object-assign 处理了 broswer 和 node 端 react-render-to-string 生成的 props 顺序问题
这个 67e0ee6 将 antd-mobile 的 object-assign 包去掉,改成依赖 babel-plugin-transform-assign 来 polyfill, 而 core-js 貌似没处理这个逻辑
@cncolder 有空的时候可以基于这个 demo 检查下最新的 antd-mobile 代码 ssr 是否有 checksum 问题
Hi, I was wondering if antd-mobile
supports expo
and create-react-native-app
?
我的工程是用create-react-app创建的,然后使用了 config-overrides.js.
现在我需要使用postcss-preset-env,来实现cssnext的一些功能.
但是当我这样加入时,postcss-preset-env插件就无效,ant-mobile有效
config.module.rules[1].oneOf.unshift(
{
test: /\.css$/,
exclude: /node_modules|antd-mobile\.css|src\\index\.css|iconfonts\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]___[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')({stage:0}),//support css-modules @value
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}
]
}
);
如果我用这个自己写的插件react-app-rewire-postcss-preset-env 来使 postcss-preset-env插件生效,但这样 exclude:/node_modules|antd-mobile\.css/
缺不生效了
代码如下,我在插件中已经添加了exclude:/node_modules|antd-mobile\.css/
const rewireCssModules = require('react-app-rewire-postcss-preset-env');
module.exports = function override(config, env) {
// ...
config = rewireCssModules(config, env,{stage:0,browsers:'> 2%'});
// ...
return config;
}
请问是不是我的集成方法错了?
同构的时候出现下面问题,请问如果是同构需要怎么做
ERROR in ./client/App.js
Module not found: Error: Cannot resolve module 'antd-mobile/lib/button/style/css
' in C:\DouBo.New.Web\client
@ ./client/App.js 7:11-54
ERROR in .//._antd-mobile@1.1.1@antd-mobile/lib/button/index.js/._antd-mobile@1.1.1@antd-mobile/lib/button/index.js 12:17-40
Module not found: Error: Cannot resolve module 'react-native' in C:\DouBo.New.We
b\node_modules._antd-mobile@1.1.1@antd-mobile\lib\button
@ ./
ERROR in .//._antd-mobile@1.1.1@antd-mobile/lib/button/style/index.js/._antd-mobile@1.1.1@antd-mobile/lib/button/style/index.js 2:17-40
Module not found: Error: Cannot resolve module 'react-native' in C:\DouBo.New.We
b\node_modules._antd-mobile@1.1.1@antd-mobile\lib\button\style
@ ./
Child html-webpack-plugin for "..\views\dev\index.html":
Asset Size Chunks Chunk Names
../views/dev/index.html 26.2 kB 0
chunk {0} ../views/dev/index.html 1.9 kB [rendered]
[0] ./~/._html-webpack-plugin@2.28.0@html-webpack-plugin/lib/loader.js!.
/views/tpl/index.tpl.html 1.9 kB {0} [built]
<-- GET /__webpack_hmr
webpack building...
> node node_modules/react-native/local-cli/cli.js start
module.js:471
throw err;
^
Error: Cannot find module './$.add-to-unscopables'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
希望可以在这个例子里面,添加px2rem的使用示例,这个配置应该在什么地方添加才能生效。
克隆的是antd-mobile-samples直接运行的,运行后不起作用
- antd-mobile 版本:
"dependencies": {
"antd-mobile-rn": "next",
"react": "^15.6.1",
"react-native": "0.41.2"
},
还有如下代码:
const path = require('path');
const fs = require('fs');
const defaultVars = require('antd-mobile-rn/lib/style/themes/default.native');
const customVars = require('../theme');
const themePath = path.resolve(require.resolve('antd-mobile-rn'), '../style/themes/default.native.js');
const themeVars = Object.assign({}, defaultVars, customVars);
if (fs.statSync(themePath).isFile()) {
fs.writeFileSync(
themePath,
'var brandPrimary = "#108ee9"; var brandPrimaryTap = "#1284d6";module.exports = ' + JSON.stringify(themeVars)
);
}
请问是不是还需要在其他地方进行配置?这种修改代码样式的原理是什么呢
yarn version: 0.24.6
Steps followed
$ yarn cache clear
$ git clone [email protected]:ant-design/antd-mobile-samples.git
$ cd antd-mobile-samples/create-react-app
$ yarn install
$ yarn build
Output
yarn build v0.24.6
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.
./src/App.js
51:10-16 'antd-mobile' does not contain an export named 'Button'.
error Command failed with exit code 1.
antd-mobile 版本:~2.0.0-alpha.4
浏览器 (或标明是 react-native) 及其版本:react-native 0.41.2
操作系统及其版本:iOS 11.2.1
在真机上运行Demo:https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui ,发现自定义的样式并没有生效。
我自己的代码按照Readme也未生效:
import listDefaultStyle from 'antd-mobile/lib/list/style/index.native';
const newListStyle = {
...listDefaultStyle,
Item: {
...listDefaultStyle.Item,
paddingLeft: 0,
backgroundColor: 'red',
},
}
<List styles={StyleSheet.create(newListStyle)}>
// ...
</List>
custon-rn-theme.js:
const path = require('path');
const fs = require('fs');
// for 1.x
// const defaultVars = require('antd-mobile/lib/style/themes/default');
// for 2.x
const defaultVars = require('antd-mobile-rn/lib/style/themes/default.native');
const customVars = require('../theme');
// for 1.x
// const themePath = path.resolve(require.resolve('antd-mobile'), '../style/themes/default.js');
// for 2.x
const themePath = path.resolve(require.resolve('antd-mobile-rn'), '../style/themes/default.native.js');
const themeVars = Object.assign({}, defaultVars, customVars);
if (fs.statSync(themePath).isFile()) {
fs.writeFileSync(
themePath,
'var brandPrimary = "#F00"; var brandPrimaryTap = "#1284d6";module.exports = ' + JSON.stringify(themeVars)
);
}
theme.js 变量名和default的名字相同
下载下来官网例子后无法运行,吧 /icon 页面, 按照官网文档,改成
const CustomIcon = ({ type, className = '', size = 'md', ...restProps }) => (
<svg
className={`am-icon am-icon-${type.substr(1)} am-icon-${size} ${className}`}
{...restProps}>
<use xlinkHref={type} /> {/* [email protected] */}
{/* <use xlinkHref={#${type.default.id}} /> */} {/* svg-sprite-loader@latest */}
</svg>
);
<CustomIcon type={require('../static/reload.svg')} />
来使用 svg, 是可以正常显示 svg 的,但是刷新浏览器,会抛出异常,如上图所示
感觉阿里公司的egg和antd都是很棒的开源产品, 要是结合起来就很完美了!
用的过程中,缺少参考!
如果官方有这样的例子,简直是美极了!~
antm-roadhog
中本机访问localhost:8001
没问题
想用手机测一测效果 在移动端输入本机ip 比如http://192.168.1.144:8001
页面出现的是Invalid Host header
请问什么原因会导致这种问题?
"scripts": {
"start": "roadhog server",
"build": "roadhog build",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint"
}
请问 "precommit": "npm run lint"
这一句是啥意思?
命令行 输入: npm precommit 运行项目?
还是表示我们git 提交的时候 校验代码?
在 README 中提到
TypeScript-react 官方教程里提供的 awesome-typescript-loader 建议不要使用,建议改用 ts-loader
请问是否有什么具体的限制或问题?
怎么获取InputItem 引用 , ref不生效
antd-mobile里面并没有index.web文件
ERROR in ./src/index.jsx
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/lianming.wang"
at /Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/lianming.wang/Desktop/antd-mobile-sample/web-webpack2/node_modules/babel-loader/lib/index.js:46:20)
@ multi (webpack)-dev-server/client?http://0.0.0.0:8000 ./src/index
ERROR in ./~/.1.0.4@antd-mobile/lib/toast/style/assets/success.svg
Module parse failed: /Users/leochen/Downloads/antd-mobile-samples-master/web-webpack-pro/node_modules/.1.0.4@antd-mobile/lib/toast/style/assets/su
ccess.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
rt
rt,貌似当前样例中都是rn-web,原生的有么?
前提:无法自定义主题,参照 web-roadhog
报错:
./node_modules/antd-mobile/lib/input-item/style/index.less
Module build failed:
&.keyboard-delete {
.encoded-svg-background('input_item_kb_backspace');
^
Inline JavaScript is not enabled. Is it set in your options?
in E:\2017-new-workspace\dl-keep-cloud\sources\dl-keep-cloud\app-center\src\main\webapp\node_modules\antd-mobile\lib\input-item\style\custom-keyboard.less (line 136, column 10)
我的配置:
.roadhogrc.js
const path = require('path');
const pxtorem = require('postcss-pxtorem');
const svgSpriteDirs = [
require.resolve('antd-mobile').replace(/warn.js$/, ''), // antd-mobile 内置svg
];
export default {
entry: 'src/index.js',
svgSpriteLoaderDirs: svgSpriteDirs,
theme: "./theme.config.js",
env: {
development: {
extraBabelPlugins: [
'dva-hmr',
'transform-runtime',
['import', { 'libraryName': 'antd-mobile', 'libraryDirectory': 'lib', 'style': true }]
],
extraPostCSSPlugins: [
pxtorem({
rootValue: 100,
propWhiteList: [],
}),
],
},
production: {
extraBabelPlugins: [
'transform-runtime',
['import', { 'libraryName': 'antd-mobile', 'libraryDirectory': 'lib', 'style': true }]
],
extraPostCSSPlugins: [
pxtorem({
rootValue: 100,
propWhiteList: [],
}),
],
}
},
"proxy": {
"/": {
"target": "http://localhost:8003",
"changeOrigin": true,
"secure": false
}
}
}
---------------------华丽丽的分割线----------------------------
theme.config.js
const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');
module.exports = () => {
const themePath = path.join(__dirname, './themes/default.less');
return lessToJs(fs.readFileSync(themePath, 'utf8'));
};
---------------------华丽丽的分割线----------------------------
themes/default.less
// 本文件是对 ant-design-mobile:
// https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
// 相应变量值的覆盖
// 注意:只需写出要覆盖的变量即可(不需要覆盖的变量不要写)
@import '~antd-mobile/lib/style/themes/default.less';
// 全局/品牌色
@brand-primary: #ff6600;
---------------------华丽丽的分割线----------------------------
package.json 环境
"dependencies": {
"@antv/f2": "^3.1.3-beta.2",
"antd-mobile": "^2.1.8",
"babel-runtime": "^6.9.2",
"bootstrap": "^3.3.7",
"dva": "^1.2.1",
"font-awesome": "^4.7.0",
"js-cookie": "^2.2.0",
"moment": "^2.22.0",
"rc-form": "^2.1.7",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"reqwest": "^2.0.5"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.7.0",
"babel-plugin-transform-runtime": "^6.9.0",
"css-loader": "^0.28.11",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.12.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"less-vars-to-js": "^1.2.1",
"mockjs": "^1.0.1-beta3",
"npm-run-all": "^4.1.2",
"postcss-pxtorem": "^4.0.1",
"redbox-react": "^1.4.3",
"roadhog": "^1.1.1",
"shelljs": "^0.8.1",
"style-loader": "^0.20.3"
}
多种方式都使过了,直接把我的代码嫁接到 项目例子上,编译不报错,但是样式全部都没有了,
ubuntu16 node7.10
运行 yarn start
yarn start v1.0.2
$ react-native-scripts start
1:37:23 PM: Starting packager...
Done in 26.94s.
运行 npm run android 之后就卡在这,过一会就没有提示的停掉了
> [email protected] android /mydata/code/antd-mobile-samples/create-react-native-app
> react-native-scripts android
1:37:49 PM: Starting packager...
我用 react native init 的工程在我本机模拟器跑得了,我直接git clone 了这个不行了
// 修改前
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
// 修改后
autoprefixer({
browsers: [
'> 0.3%',
// '>10%',
'iOS >= 8',
'Android >= 4',
// 'Android >= 4.1',
'last 7 versions',
// 'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
// flexbox: 'no-2009',
flexbox: true,
// remove: false,
}),
已经花了很长时间找解决方案,但都没奏效,我该怎么做?
设备:macbook pro
yarn --version 0.24.6
问题:
create-react-app git:(master) ✗ yarn build
yarn build v0.24.6
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.
./src/App.js
51:10-16 'antd-mobile' does not contain an export named 'Button'.
error Command failed with exit code 1.
请问是什么问题?求指教
已经解决
提示 res.setHeader is not a function
RT
试了下,script的功能就是把theme.js里的code替换到node_module 的style/theme/default.js。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.