reactjs - React Native init 项目 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 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;
解决方案
花了一点时间找到,但结束标签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
);
};
推荐阅读
- c++ - 我如何解决这个没有匹配的函数来调用'stoi(int&)'|
- reactjs - 如何将 webpack 配置为代码拆分小型静态反应页面
- reactjs - React JS 登录和路由器未按预期工作
- android - 为什么 FingerprintManager.AuthenticationCallback 在前台服务中没有响应?
- kaitai-struct - kaitai-struct-compiler 生成与 webIDE 不同的文件
- api - 如何解决 HTTPError: 400 Client Error: Bad Request for URL inRobot Frame work
- git - mkdir: 无法创建目录 '/dev/shm': 只读文件系统
- c# - 在 Discord Rich Embed 上显示字节数组图像
- docker - 使用 Go 模板获取 docker 图像路径的最后一个元素
- reactjs - 当我在弹出窗口外部单击时,我希望 SweetAlert 弹出窗口保持在同一页面上,但它导航到另一个页面