我使用creat-react-app
来初始化一些我希望在本机和Web之间共享的代码。在我的package.json
中,我有两个单独的命令,用于使用react-scripts-ts
和react-native-scripts-ts
为每个平台启动:
的package.json
...,
"scripts": {
"tsc": "tsc",
"clean": "rimraf artifacts",
"build": "npm run clean && npm run tsc --",
"start-web": "npm run build && react-scripts-ts start",
"start-native": "npm run build && react-native-scripts start",
},
...
(有关如何执行此操作的详细说明,请访问https://medium.com/@yannickdot/write-once-run-anywhere-with-create-react-native-app-and-react-native-web-ad40db63eed0)
这很棒,我可以在两个平台上使用react-native
组件。我遇到的问题是当我尝试使用react-routing
等外部软件包时。
我在react-router-native
中加入了react-router-dom
和package.json
。我试图实现本文中描述的内容(https://medium.com/@yannickdot/hi-jared-2650fbb2eda1),但使用的是typescript而不是JS,给我:
routing.native.tsx
export {
NativeRouter as Router, // Rename
Switch,
Route,
Link
} from 'react-router-native'
routing.web.tsx
export {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom'
但是,与文章中描述的相反,当使用typescript时,不会自动识别应包含哪个文件。我得到了一个简单的错误:
src/App.tsx:10:26 - error TS2307: Cannot find module './routing'.
10 import Router from "./routing";
这是有道理的,因为当我查看编译器的输出时,不存在模块routing
:
artifacts
| App.js
| routing
| routing.native.js
| routing.web.js
在运行*.native.tsx
命令时,如何在运行start-native
命令和所有*.web.tsx
文件时告诉typescript编译器包含所有start-web
文件?
理想情况下,这应该可以在编译时将其他参数传递给typescript编译器,后者会覆盖tsconfig.json
。例:
tsc --exclude="./**/*.native.tsx"
我知道这可以通过黑客解决方案来完成,例如通过编写脚本来复制整个源代码,删除所有不需要的文件,保留正确的文件,并编译复制的源文件夹,但我想知道是否有更简洁的方法来执行此操作。
提前致谢!
不使用外部工具的可能解决方案:
见this question on Stackoverflow
export default function getPlatform(): string {
if (typeof document != 'undefined') {
// I'm on the web!
return 'web';
}
else if (typeof navigator != 'undefined' && navigator.product == 'ReactNative') {
// I'm in react-native
return 'native';
}
else {
// I'm in node js
return 'node';
}
}
import getPlatfrom from '../getPlatform';
const platform = getPlatfrom();
const routing = platform === 'web' ? require('./routing.web') : require('./routing.native');
export const {Router, Switch, Route, Link} = routing;
import { Route } from './routing/index';
你可以在IRouting
中添加一个接口routing/index
和一些类型的转换,这样你就不会失去类型安全和自动完成......