无法运行React Native Web项目

Question

我正在基于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 [email protected] 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;

Answer 1

rect-native-web似乎仅支持React-Native版本0.55.0