我正在基于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;