React Native iOS项目JSX语法错误排查求助

报错信息 #

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;

排查步骤与解决方案 #

1. 修正文件扩展名 #

JSX语法无法在纯.ts文件中被TypeScript正确解析，需将PillScanner.ts重命名为PillScanner.tsx——你复制的正常首页文件大概率是.tsx格式，这是核心问题之一。

2. 删除语法残留垃圾 #

报错信息第17行末尾有个多余的]：<View style={styles.bottomNav}>]，直接删除这个无关的方括号。

3. 验证TypeScript配置 #

检查项目根目录的tsconfig.json，确保JSX配置正确：

{
  "compilerOptions": {
    "jsx": "react-native" // React 17+也可使用"react-jsx"
  }
}

4. 清除缓存重启服务 #

执行命令清除React Native缓存：

npx react-native start --reset-cache

之后重新运行iOS项目：

npx react-native run-ios

总结 #

优先处理前两个操作：改文件扩展名、删除多余方括号，基本可以解决当前语法错误。

内容的提问来源于stack exchange，提问作者Qi'ra