reactjs - 无法运行 React Native Web 项目
问题描述
我正在基于 github 上的这个入门项目模板,使用 React Native for Web、Typescript 和 Nativebase UI 库为 web、ios 和 android 开发一个 React Native 应用程序。
https://github.com/ethanneff/react-native-web-typescript
问题是当我运行命令 yarn web 时出现以下错误:
yarn run v1.12.1
$ react-scripts-ts start
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
Watching: d:\example\src
Starting the development server...
ts-loader: Using typescript@3.1.6 and d:\example\tsconfig.json
Failed to compile.
./node_modules/native-base-shoutem-theme/src/StyleProvider.js
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type.
| */
| export default class StyleProvider extends React.Component {
| static propTypes = {
| children: PropTypes.element.isRequired,
| style: PropTypes.object,
这是 package.json
{
"name": "example",
"version": "0.0.1",
"private": true,
"scripts": {
"web": "react-scripts-ts start",
"build": "react-scripts-ts build",
"ios": "react-native run-ios",
"android": "react-native run-android",
"test": "jest --coverage",
"lint": "tslint -p tsconfig.json -c tslint.json",
"rebuild": "rm -rf ios; rm -rf android; react-native upgrade; rm -f .babelrc; rm -f .buckconfig; rm -f .flowconfig; rm -f .watchmanconfig; rm -f .gitattributes;"
},
"dependencies": {
"mobx": "^5.6.0",
"mobx-react": "^5.4.2",
"native-base": "^2.8.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-native": "0.57.5",
"react-native-web": "^0.9.8",
"react-scripts-ts": "^3.1.0"
},
"devDependencies": {
"@types/jest": "^23.3.0",
"@types/react": "^16.4.6",
"@types/react-native": "^0.57.13",
"@types/react-test-renderer": "^16.0.1",
"babel-jest": "23.6.0",
"babel-preset-react-native": "4.0.1",
"jest": "23.6.0",
"prettier": "^1.13.7",
"react-art": "^16.4.1",
"react-native-typescript-transformer": "^1.2.10",
"react-test-renderer": "^16.4.1",
"ts-jest": "^23.0.1",
"typescript": "^3.1.6"
},
"babel": {
"presets": [
"react-native"
]
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"globals": {
"ts-jest": {
"useBabelrc": true
}
}
}
}
这是 src\index.tsx
// app entry
import Config from "./commons/Config";
import { Platform, AppRegistry } from "react-native";
import App from "./containers/App";
// register the app
AppRegistry.registerComponent(Config.app.name, () => App);
if (Platform.OS === Config.os.web) {
AppRegistry.runApplication(Config.app.name, {
rootTag: document.getElementById(Config.web.root)
});
}
这是 src\containers\App\index.tsx
import * as React from "react";
import { Container, Header, Content, Footer, Text } from "native-base";
const App = () => (
<Container>
<Header />
<Content padder>
<Text>
This is Content Section
</Text>
</Content>
<Footer />
</Container>
);
export default App;
解决方案
推荐阅读
- javascript - 测试 :id 路由
- python - 神经国际象棋:样本神经网络陷入价值
- javascript - React Excel 工作簿构建
- asp.net - 注销时重定向到不存在的 URL 时的 Asp.net Webforms 应用程序
- mqtt - mqtt-mosquitto 存储所有主题的地方?
- groovy - Visual Studio Code 中的 Groovy 格式化程序/美化器
- python - 如何在 tensorflw 中创建一个只有单个时间步长的 lstm 单元?
- python - 连接相似名称变量的方式
- mongodb - MongoDB shell 版本 v3.6.4
- azure - Azure Ad b2c:在注册时更改当前电子邮件模式验证