React Native添加按钮遇「Adjacent JSX elements」报错，求解决方案

这个报错的核心原因是：React Native的JSX要求组件return的内容必须被单个根元素包裹。你的代码里return直接返回了两个<View>元素，没有外层容器包裹，所以触发了这个错误。

下面是两种可行的修正方案：

方案一：用外层View包裹所有元素 #

直接添加一个外层<View>把两个子View包起来，代码如下：

function Expenses() {
  return (
    <View>
      <View style={styles.settings}>
        <Button 
          title="Am I overbudget?"
          onPress={() => Alert.alert('No you are not overbudget !')}
        />
      </View>
    
      <View style={styles.container}>
        <TextInput style={styles.input} placeholder="Input Expenses"  />
        <TextInput style={styles.input} />
        <Text>Expenses</Text>
      </View>
    </View>
  );
};

方案二：用React.Fragment（简写<>）包裹 #

如果不想额外添加一个View节点，可以用React.Fragment或者它的简写形式<>来包裹，代码如下：

import React from 'react'; // 确保已经导入React

function Expenses() {
  return (
    <>
      <View style={styles.settings}>
        <Button 
          title="Am I overbudget?"
          onPress={() => Alert.alert('No you are not overbudget !')}
        />
      </View>
    
      <View style={styles.container}>
        <TextInput style={styles.input} placeholder="Input Expenses"  />
        <TextInput style={styles.input} />
        <Text>Expenses</Text>
      </View>
    </>
  );
};

注意：使用React.Fragment时需要确保已经导入React包，简写形式<>则不需要额外导入，但部分旧版本的React Native可能不支持，建议根据你的项目版本选择。

另外，记得确认代码顶部已经导入了所有用到的组件：

import { View, Button, TextInput, Text, Alert } from 'react-native';

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