React Native登录界面开发：相邻JSX元素需包裹在闭合标签或片段中

你遇到的报错是因为JSX语法要求组件return的内容必须只有一个根元素，你的代码里return直接返回了两个相邻的<View>组件，没有用容器或片段包裹，所以React Native无法解析。

有两种常用修复方式：

方法1：用外层View包裹所有元素 #

在两个<View>外面套一个父View，让整个return只有一个根元素：

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { HeaderHeightContext } from 'react-navigation-stack';

export default function App() {
    return (
      {/* 新增外层View作为根容器 */}
      <View style={{flex: 1}}>
         <View style = {styles.container}>
            <Image source = {require('./assets/logo1.png')}
            style={styles.hiText}></Image>
            <Text style={styles.ligmaText}>Viral</Text>
         </View>
           
          <View>
            <Text style ={styles.fontText}>Forgot Password?</Text>
            <Text style ={styles.baseText}>Don't have an account? <Button title = "Register Now"></Button></Text>
            <Text style={styles.countUp}>Google</Text> 
            <Text style={styles.monkey}>or</Text>
            <Text style={styles.flexUp}>Facebook</Text>
            <Text style={styles.house}>Login</Text>
            <Image source = {require('./assets/googlelogo.png')} style={styles.lookUp}></Image>
            <Image source = {require('./assets/facebooklogo.png')} style={styles.backUp}></Image>
            <StatusBar style="auto" />
          </View>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  baseText: {
     flex: 2,
     marginTop: 0,
     alignItems: 'stretch',
     
  },
  fontText: {
     flex: 10,
      marginTop: 50,
      textAlign: 'right',
  },
  ligmaText: {
     flex: 7,
     fontSize: 22,
  },
  hiText: {
     flex: 10,
     height: 100,
     width: 100,
  },
  countUp: {
  },
  flexUp: {
  },
  lookUp: {
     height: 50,
     width: 50
  },
  backUp: {
     height:50,
     width: 50,
  },
  monkey: {

  },
});

方法2：使用JSX片段（推荐，无额外DOM节点） #

如果不想多套一层View，可以用JSX片段<>和</>包裹，它不会生成额外元素：

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { HeaderHeightContext } from 'react-navigation-stack';

export default function App() {
    return (
      <>
         <View style = {styles.container}>
            <Image source = {require('./assets/logo1.png')}
            style={styles.hiText}></Image>
            <Text style={styles.ligmaText}>Viral</Text>
         </View>
           
          <View>
            <Text style ={styles.fontText}>Forgot Password?</Text>
            <Text style ={styles.baseText}>Don't have an account? <Button title = "Register Now"></Button></Text>
            <Text style={styles.countUp}>Google</Text> 
            <Text style={styles.monkey}>or</Text>
            <Text style={styles.flexUp}>Facebook</Text>
            <Text style={styles.house}>Login</Text>
            <Image source = {require('./assets/googlelogo.png')} style={styles.lookUp}></Image>
            <Image source = {require('./assets/facebooklogo.png')} style={styles.backUp}></Image>
            <StatusBar style="auto" />
          </View>
      </>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  baseText: {
     flex: 2,
     marginTop: 0,
     alignItems: 'stretch',
     
  },
  fontText: {
     flex: 10,
      marginTop: 50,
      textAlign: 'right',
  },
  ligmaText: {
     flex: 7,
     fontSize: 22,
  },
  hiText: {
     flex: 10,
     height: 100,
     width: 100,
  },
  countUp: {
  },
  flexUp: {
  },
  lookUp: {
     height: 50,
     width: 50
  },
  backUp: {
     height:50,
     width: 50,
  },
  monkey: {

  },
});

你的第二个<View>没有设置样式，可能会导致布局混乱，建议给它添加合适的flex或布局样式，优化界面排版。

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