React Native修复‘相邻JSX元素需闭合标签包裹’错误及布局调整

错误根源分析 #

你遇到的Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag错误，核心原因是JSX要求返回的内容必须是单个根元素，而你的代码里有两个同级元素没有被同一个父容器包裹。具体来说，原代码中第一个<BoxContainer>结束后，你错误地提前闭合了最外层的<View style={styles.page}>，导致第二个<BoxContainer>变成了和这个<View>平级的独立元素，触发了语法检查错误。

你提到使用JSX片段<>无效，大概率是因为你把片段加在了错误的层级，没有把两个同级的<BoxContainer>正确包裹在片段（或父容器）里。

修改位置说明 #

错误出现在原代码第41行之前的那个</View>——这个标签是多余的，它提前关闭了最外层的页面容器，导致第二个<BoxContainer>失去了父元素，变成了游离的同级JSX元素。

修改后的完整代码 #

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";
import BoxContainer from './components/BoxContainer.js'

export default class App extends Component {
  // 绑定点击事件到组件实例
  buttonClickListener = () => {
    alert("Clicked On Button !!!");
  };

  render() {
    return (
      {/* 最外层页面容器，统一包裹所有内容 */}
      <View style={styles.page}>
        <Text style={styles.headerText}></Text>
        
        {/* 第一个横向排列按钮的容器 */}
        <BoxContainer style={styles.container1}>
          <View style={{flexDirection:'row'}}>
            <View style={[{ width: "30%", height :100, margin: 0,padding:10, backgroundColor: "green" }]}>
              <Button onPress={this.buttonClickListener} title="BUTTON1" color="#00B0FF" />
            </View>
            <View style={[{ width: "70%", height :100, margin: 0, backgroundColor: "red" }]}>
              <Button onPress={this.buttonClickListener} title="BUTTON2" color="#00B0FF" />
            </View>
          </View>
        </BoxContainer>
        
        {/* 第二个纵向排列按钮的容器（修复后与第一个BoxContainer同属page的子元素） */}
        <BoxContainer style={styles.container2}>
          {/* 修正flexDirection为column，实现纵向排列需求 */}
          <View style={{flexDirection:'column'}}>
            <View style={[{ width: "90%", height :100, margin: 0, backgroundColor: "red" }]}>
              <Button onPress={this.buttonClickListener} title="Button One" color="#00B0FF" />
            </View>
            <View style={[{ width: "90%",height :80, margin: 1, backgroundColor: "red" }]}>
              <Button onPress={this.buttonClickListener} title="Button Two" color="#EC407A" />
            </View>
            <View style={[{ width: "90%",height :60, margin: 1, backgroundColor: "red" }]}>
              <Button onPress={this.buttonClickListener} title="Button Three" color="#1DE9B6" />
            </View>
          </View>
        </BoxContainer>
      </View> {/* 这里才是最外层page容器的正确闭合标签 */}
    );
  }
}

const styles = StyleSheet.create({
  page:{flex:1},
  container1: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container2: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
});

额外优化点说明 #

1. 修正了第二个按钮组的flexDirection：你需求是纵向排列三个按钮，但原代码写的是row，改成column才能实现预期的纵向布局。
2. 修正了第一个按钮的宽度值：原代码写的"30"改为"30%"，避免布局宽度异常。
3. 如果你的React Native版本较低不支持<>片段语法，可以用<React.Fragment>代替，但在这个场景下，用最外层的<View>包裹所有元素是更符合React Native布局习惯的方案。

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