响应本机初始化项目Linting错误问题

问题描述

你好，我根据官方教程使用React Native CLI开始了一个新的React-Native项目。 我的文本编辑器是VS Code。

创建项目后，保存App.js文件==>

    Unexpected token (29:6)
  27 | const App: () => React$Node = () => {    
  28 |   return (    
> 29 |     <>    
     |      ^    
  30 |       <StatusBar barStyle="dark-content" />    
  31 |       <SafeAreaView>    
  32 |         <ScrollView

我将<>替换为<React.Fragment>，但随后：

Unexpected token,expected } (76:13)
  74 | 
  75 | const styles = StyleSheet.create({
> 76 |   scrollView: {
     |             ^
  77 |     backgroundColor: Colors.lighter,78 |   },79 |   engine: {
--------------------------------------------------------------------

我把eslint，babel预设，babel-eslint弄得一团糟，但是问题仍然存在（或者我不知道）。

该项目可以在模拟器上编译并成功运行。 我该如何解决？

谢谢

编辑：

这是App.js

中的代码

import React from 'react';
import {
  SafeAreaView,StyleSheet,ScrollView,View,Text,StatusBar,} from 'react-native';

import {
  Header,LearnMoreLinks,Colors,DebugInstructions,ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <React.Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    <React.Fragment/>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,},engine: {
    position: 'absolute',right: 0,body: {
    backgroundColor: Colors.white,sectionContainer: {
    marginTop: 32,paddingHorizontal: 24,sectionTitle: {
    fontSize: 24,fontWeight: '600',color: Colors.black,sectionDescription: {
    marginTop: 8,fontSize: 18,fontWeight: '400',color: Colors.dark,highlight: {
    fontWeight: '700',footer: {
    color: Colors.dark,fontSize: 12,padding: 4,paddingRight: 12,textAlign: 'right',});

export default App;

解决方法

花点时间查找，但是Fragment的结束标记不正确。

当前

<React.Fragment/>

应该是

</React.Fragment>

代码

const App: () => React$Node = () => {
  return (
    <React.Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </React.Fragment> // <-- fixed closing tag
  );
};