React Native init 项目 Linting 报错问题

Posted 2023-03-27

【中文标题】React Native init 项目 Linting 报错问题

【英文标题】：React Native init project Linting error problem

【发布时间】：2020-12-10 11:36:20

【问题描述】：

您好，我根据官方教程使用 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 preset、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,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  ,
);

export default App;

【问题讨论】：

嗨，欢迎来到 ***。您能否更新您的问题以提供Minimal, Complete, and Reproducible 代码示例？看起来您只是在某处缺少一个右大括号。

@DrewReese 嗨，我更新了我的问题。该文件由 react-native cli 生成。我只使用 npx react-native init 命令（来自本指南reactnative.dev/docs/environment-setup）。之后没有改变任何东西。你能看看吗

【参考方案1】：

花了一点时间才找到，但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
  );
;

【讨论】：

天哪 :)))。非常感谢。问题消失了。不敢相信。我卡了将近一天

@DucDang 不用担心，这就是代码审查和获得另一组代码关注的目的。也许在您用来生成此代码的项目/CLI 工具的存储库中打开一个问题。如果答案已充分解决了您的问题，请标记为已接受，如果您认为它有帮助，也请点赞。干杯。