React Native新手遇Adjacent JSX元素错误，求助TouchableOpacity问题

嘿，我明白你作为新手遇到这个报错的困惑！虽然提示说“相邻JSX元素必须包裹在闭合标签中”，但真正的问题是一个小语法错误——你在TouchableOpacity的onPress属性里漏写了一个闭合括号，导致React解析代码时出现混乱，才抛出了这个看似不相关的错误提示。

错误位置分析 #

看你代码里的这一行：

<TouchableOpacity onPress={ () => console.log('List Pressed')>

这里的箭头函数定义只写了开头的{，却没写结尾的}，正确的写法应该是：

<TouchableOpacity onPress={ () => console.log('List Pressed') }>

为什么会出现这个误导性报错？ #

当JSX解析器遇到未闭合的括号时，它会错误地解析后续的<Text>元素，误以为这个<Text>是和前面的<Button>并列的、没有被包裹的独立元素，所以才提示你需要用JSX片段或容器包裹，但实际上根本问题是语法不完整。

修正后的完整代码 #

import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-native';

const HomeScreen = () => {
  return (
    <View>
      <Text style={styles.text}>Sup boiz</Text>
      <Button onPress={() => console.log('Button pressed')} title="Go to components demo" />
      {/* 修复了onPress的括号闭合问题 */}
      <TouchableOpacity onPress={ () => console.log('List Pressed') }>
        <Text>Go to List demo</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  text: { fontSize: 30 }
});

export default HomeScreen;

小建议 #

以后遇到这类看似JSX结构的错误时，优先检查代码里的括号、引号是否都正确闭合——很多时候这类小细节的疏忽，会导致React抛出误导性的报错提示哦！

内容的提问来源于stack exchange，提问作者gandalf129875