diff --git a/packages/taro-cli/src/plugin.js b/packages/taro-cli/src/plugin.js index d21945e7e4dd..b1d2491348c8 100644 --- a/packages/taro-cli/src/plugin.js +++ b/packages/taro-cli/src/plugin.js @@ -258,16 +258,26 @@ function wxPluginWatchFiles () { // 最后删除 output/plugin const names = glob.sync(`${outputPath}/${PLUGIN_ROOT}/**/*`) if (names.length) { - const jsNames = glob.sync(`${outputPath}/${PLUGIN_ROOT}/!(npm)/**/*.js`) + const jsNames = glob.sync(`${outputPath}/${PLUGIN_ROOT}/{,!(npm)/**/}*.js`) const ioPromises = jsNames.map(async name => { let content = await fs.readFile(name) content = content.toString() - let shouldWrite - const replacement = content.replace(/['|"](\.\.\/)+npm\/.+?['|"]/g, str => { - shouldWrite = true - return str.replace('../', '') + + let isShouldBeWritten + let replacement = content.replace(/['|"]((\.\.\/)+)npm\/.+?['|"]/g, (str, $1) => { + isShouldBeWritten = true + return $1 === '../' ? str.replace('../', './') : str.replace('../', '') }) - if (shouldWrite) await fs.writeFile(name, replacement) + + const REG_PLUGIN_DEPS = RegExp(`['|"](/${PLUGIN_ROOT}.+)['|"]`, 'g') + replacement = replacement.replace(REG_PLUGIN_DEPS, (str, $1) => { + if (Util.REG_FONT.test($1) || Util.REG_IMAGE.test($1) || Util.REG_MEDIA.test($1)) { + return str.replace(RegExp(`^['|"]/${PLUGIN_ROOT}`, 'g'), str => str.replace(`${PLUGIN_ROOT}`, '')) + } + return str + }) + + if (isShouldBeWritten) await fs.writeFile(name, replacement) }) await Promise.all(ioPromises) @@ -359,12 +369,22 @@ async function buildWxPlugin ({ watch }) { const ioPromises = names.map(async name => { let content = await fs.readFile(name) content = content.toString() - let shouldWrite - const replacement = content.replace(/['|"]((\.\.\/)+)npm\/.+?['|"]/g, (str, $1) => { - shouldWrite = true + + let isShouldBeWritten + let replacement = content.replace(/['|"]((\.\.\/)+)npm\/.+?['|"]/g, (str, $1) => { + isShouldBeWritten = true return $1 === '../' ? str.replace('../', './') : str.replace('../', '') }) - if (shouldWrite) await fs.writeFile(path.join(appPath, name), replacement) + + const REG_PLUGIN_DEPS = RegExp(`['|"](/${PLUGIN_ROOT}.+)['|"]`, 'g') + replacement = replacement.replace(REG_PLUGIN_DEPS, (str, $1) => { + if (Util.REG_FONT.test($1) || Util.REG_IMAGE.test($1) || Util.REG_MEDIA.test($1)) { + return str.replace(RegExp(`^['|"]/${PLUGIN_ROOT}`, 'g'), str => str.replace(`${PLUGIN_ROOT}`, '')) + } + return str + }) + + if (isShouldBeWritten) await fs.writeFile(path.join(appPath, name), replacement) }) await Promise.all(ioPromises) diff --git a/packages/taro-components-rn/.expo/settings.json b/packages/taro-components-rn/.expo/settings.json deleted file mode 100644 index 8e4fcd22acd6..000000000000 --- a/packages/taro-components-rn/.expo/settings.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "hostType": "lan", - "lanType": "ip", - "dev": true, - "minify": false, - "urlRandomness": null -} \ No newline at end of file diff --git a/packages/taro-components-rn/README.md b/packages/taro-components-rn/README.md index 4d8c03358ddf..c04403fc91fc 100644 --- a/packages/taro-components-rn/README.md +++ b/packages/taro-components-rn/README.md @@ -2,87 +2,30 @@ Alo, alo! Bilibilibilibibili~ -
- 关于 Icon 的使用 - - > IOS: 如果你要用到 `Icon`,请先把 `libART.a` 引进去,步骤如下: - - > `open ios/AwesomeProject.xcodeproj` 在xcode中打开项目,拖拽 `node_modules/react-native/Libraries/ART/ART.xcodeproj` 到左侧栏的 `Libraries` 下;选中项目左侧栏中的根节点,然后在 `Build Phases` 中 `Link Binary with Libraries` 添加 `libART.a` - - > 为了尽可能地减少用户需要的操作,斟酌再三,目前方案改成:IOS使用图片来实现 Icon。 -
- -## 特别鸣谢 - -Picker 组件的重写,copy 了部分 [ant-design-mobile-rn](https://github.com/ant-design/ant-design-mobile-rn) 的组件代码,同时也给予了不少组件实现的思路。 - ## Example -[组件演示(视频480p)](http://storage.jd.com/temporary/%E7%BB%84%E4%BB%B6%E6%BC%94%E7%A4%BA480p.mov) - -> 由于在开发环境中用到 `create-react-native-app` 的模式,所以**务必**以 `dependencies` 的方式安装 `react-native` 和 `expo`,查看例子期间,务必保证它们待在 `dependencies` 下哦。 -> -> 设置 package.json 中的 `main` 为 `node_modules/expo/AppEntry.js` - -- [Expo版本清单](https://expo.io/--/api/v2/versions),这里可以看到每个版本Expo对应的版本关系,**这很重要** - ```bash -npm start - -npm run ios - +# 启动安卓模拟器 emulator @YOUR_AVD_NAME -npm run android -``` -可能遇到的问题: +# 安装依赖 +yarn -- IOS:在启动模拟器时挂起时,请先下载 `Expo版本清单` 中的 `iosUrl`,把下载解压后的文件夹添加 `.app` 后缀放进 `~/.expo/ios-simulator-app-cache`。 -- IOS:遇到 `Error: Process exited with non-zero code: 60` 时,擦除内容和设置再重新运行。 -- IOS:遇到 `React Native Version Mismatch` 时,说明 ReactNative 的版本跟 expoSDK 的版本不匹配,装一个匹配的版本就好了。 -- Android:遇到 `Error running adb: No Android device found.` 时,请先下载 `Expo版本清单` 中的 `androidUrl` 放到 `~/.expo/android-apk-cache` 下。 +# 编译源码 +npm run build -最后,当然你觉得麻烦的话:: +# 例子目录安装依赖 +cd TCRNExample +yarn -你完全可以用 `react-native-cli` 初始化一个项目,然后把 `src` 目录整个复制到这个项目下来引用查看例子。 +# 启动 Android +react-native run-android +# 启动 iOS +react-native run-ios +``` ## About code comments - ✔ Support - ✘ Not support - \- Would not support - -## Todo list - -> FS = Fully Support -> PS = Partially Support -> MS = Minimum Support - -- 视图容器 - - [x] view | MS - - [x] scroll-view | PS - - [x] swiper | PS -- 基础内容 - - [x] icon | FS - - [x] text | PS - - [x] rich-text | FS - - [x] progress | FS -- 表单内容 - - [x] button | PS - - [x] checkbox | FS - - [x] form | PS(without RESET) - - [x] input | PS - - [x] label | PS(without FOR) - - [x] picker | PS - - [x] radio | FS - - [x] slider | PS - - [x] switch | FS - - [x] textarea -- 导航 -- 媒体组件 - - [ ] audio - - [x] image | PS - - [ ] video - - [ ] camera -- 其他 - - [ ] tabbar diff --git a/packages/taro-components-rn/TCRNExample/rn-cli.config.js b/packages/taro-components-rn/TCRNExample/rn-cli.config.js index 39a51599b748..2344dbe9a7a4 100644 --- a/packages/taro-components-rn/TCRNExample/rn-cli.config.js +++ b/packages/taro-components-rn/TCRNExample/rn-cli.config.js @@ -1,10 +1,16 @@ const path = require('path') +const blacklist = require('metro').createBlacklist module.exports = { extraNodeModules: { react: path.resolve(__dirname, 'node_modules/react'), 'react-native': path.resolve(__dirname, 'node_modules/react-native') }, + getBlacklistRE () { + return blacklist([ + /TCRNExample\/node_modules\/react-native\/.*/ + ]) + }, getProjectRoots () { return [ path.resolve(__dirname), diff --git a/packages/taro-components-rn/__mocks__/fileMock.js b/packages/taro-components-rn/__mocks__/fileMock.js new file mode 100644 index 000000000000..b3a415f4c28b --- /dev/null +++ b/packages/taro-components-rn/__mocks__/fileMock.js @@ -0,0 +1,8 @@ +const path = require('path') + +/** + * REF: https://jestjs.io/docs/en/webpack + */ +module.exports = (src, filename, config, options) => { + return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';' +} diff --git a/packages/taro-components-rn/__tests__/button.spec.js b/packages/taro-components-rn/__tests__/button.spec.tsx similarity index 78% rename from packages/taro-components-rn/__tests__/button.spec.js rename to packages/taro-components-rn/__tests__/button.spec.tsx index faf683128ea4..d7742662baef 100644 --- a/packages/taro-components-rn/__tests__/button.spec.js +++ b/packages/taro-components-rn/__tests__/button.spec.tsx @@ -1,12 +1,12 @@ -import React from 'react' +import * as React from 'react' import { View, Text, Animated, Image, TouchableOpacity } from 'react-native' import { shallow } from 'enzyme' -import sinon from 'sinon' +import * as sinon from 'sinon' import { Button } from '../src' describe(') expect(wrapper.find(Text)).toHaveProperty('length', 1) }) @@ -17,6 +17,7 @@ describe(') expect(wrapper.find(Text).get(0).props.style).toEqual( expect.arrayContaining([ expect.objectContaining({ @@ -71,7 +72,7 @@ describe(') expect(wrapper.find(Text).get(0).props.style).toEqual( expect.arrayContaining([ expect.objectContaining({ @@ -84,6 +85,7 @@ describe('