SyntaxError: Unexpected token '<' vscode react-native

Question

在 vs 代码中使用 react-native 我无法编译我的代码，它会抛出 < 的语法错误。有许多标签不会对来自终端的react-native run-android 造成问题。

我正在尝试编译的代码 sn-p

import React from 'react';
import {StyleSheet, View, Text, StatusBar, Image, Platform, SafeAreaView, AppRegistry} from 'react-native';
import {Spinner} from './src/components';
import {Provider} from 'react-redux';
import configureStore from "./src/store";
import AppRouter from "./src/router";
import {PersistGate} from 'redux-persist/lib/integration/react';
import Orientation from 'react-native-orientation';
import app from './App';

let {store, persistor} = configureStore();

export default class App extends React.Component {

  componentDidMount() {
    Orientation.lockToPortrait();
  }

  splashScreen() {
    return (
      <View style={{flex: 1}}>
        <View style={styles.imageContainer}>
          <Image source={require('./src/assets/images/splash_screen.png')} style={styles.backgroundImage}/>
        </View>
        <Spinner/>
      </View>
    );
  }

  render() {
    return (
      <PersistGate persistor={persistor} loading={this.splashScreen()}>
        <Provider store={store} style={styles.container}>
          <AppRouter/>
        </Provider>
      </PersistGate>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  imageContainer: {
    position: 'absolute',
    width: '100%',
    height: '100%',
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    width: null,
    height: null,
  },

});
// AppRegistry.registerComponent('WhoopaUserApp', () => app);

这是我的 package.json

{
  "name": "WhoopaUserApp",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest-expo": "^37.0.0",
    "react-native-cli": "^2.0.1",
    "react-test-renderer": "16.13.1",
    "redux-logger": "^3.0.6"
  },
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "android": "react-native run-android --experimental-modules",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  },
  "dependencies": {
    "ac-qrcode": "^1.0.1",
    "errno": "^0.1.7",
    "expo": "^37.0.12",
    "fetchival": "^0.3.3",
    "immutability-helper": "3.1.1",
    "normalizr": "^3.6.0",
    "numeral": "^2.0.6",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-native": "0.61.4",
    "react-native-cached-image": "^1.4.3",
    "react-native-camera": "^3.29.0",
    "react-native-config": "^1.2.1",
    "react-native-easy-toast": "^1.2.0",
    "react-native-fbsdk": "^2.0.0",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-google-signin": "^2.1.1",
    "react-native-i18n": "^2.0.15",
    "react-native-maps": "0.27.1",
    "react-native-modal": "^11.5.6",
    "react-native-orientation": "^3.1.3",
    "react-native-popup-dialog": "^0.18.3",
    "react-native-progress": "^4.1.2",
    "react-native-reanimated": "^1.9.0",
    "react-native-responsive-dimensions": "^3.1.1",
    "react-native-router-flux": "^4.2.0",
    "react-native-screens": "^2.8.0",
    "react-native-scrollable-tab-view": "^1.0.0",
    "react-native-sentry": "^0.43.2",
    "react-native-splash-screen": "3.2.0",
    "react-native-swipe-list-view": "^3.1.1",
    "react-native-swipe-out": "^2.0.14",
    "react-native-swipeable": "^0.6.0",
    "react-native-swipeview": "^1.0.3",
    "react-native-swiping-row": "^0.1.2",
    "react-native-vector-icons": "^6.6.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0"
  }
}

提前致谢。

Answer 1

据我观察，问题出在这一行

 loading={this.splashScreen()}>

这里

闪屏 />

应该根据父组件内部的加载值显示