如何解决响应本机初始化项目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
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。