JSX 语法错误，意外的标记，预期为“，”

Question

我正在尝试创建一个 ios React JSX 应用程序，但我不断收到此错误，我不知道为什么。我从我的主屏幕文件中复制了有效的 ts 文件，所以我很困惑为什么我要把它放在这个文件中。

我认为这可能是一个 jest.config.js 错误，所以我尝试更新配置文件，但这也没有帮助。

我非常感谢您能给我的任何帮助。

PillScanner.ts: Unexpected token, expected "," (14:6)

  12 |   return (
  13 |     <ImageBackground
> 14 |       source={require('../assets/background.jpg')} 
     |       ^
  15 |       style={styles.background}
  16 |     >
  17 |       <View style={styles.bottomNav}>]

这是我的整个文件：

import { View, StyleSheet, ImageBackground, TouchableOpacity, Image } from 'react-native';

const PillScanner: React.FC = () => {
  return (
    <ImageBackground
      source={require('../assets/background.jpg')} 
      style={styles.background}
    >
      <View style={styles.bottomNav}>
        <TouchableOpacity>
          <Image
            source={require('../assets/home-icon.png')} // Example image for home icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/calendar-icon.png')} // Calendar icon image
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/user-icon.png')} // Example image for user icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/list-icon.png')} // Example image for list icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
    resizeMode: 'cover',
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    position: 'absolute',
    bottom: 20,
    left: 0,
    right: 0,
    padding: 10,
    backgroundColor: 'rgba(255, 255, 255, 0.7)', 
    borderRadius: 15,
    marginHorizontal: 10,
  },
  navIcon: {
    width: 24,
    height: 24,
  },
});

export default PillScanner;

Answer 1

可能出现上述错误是因为您无意中在 ] 这个 dev 的末尾添加了 ] 符号。

如果解决了请告诉我。如果没有，也请 ping 我。