这个侧边栏组件有什么问题？它显示原始文本“}”必须包含在显式文本组件中

Question

此代码在最后一天工作。当我们试图分开它时会显示此错误。我确信只要其他组件完美运行，就会出现问题。它可能是什么原因？您可以在下面查看代码：

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Platform,
} from "react-native";
import {
  Content,
  List,
  Icon,
  ListItem,
  Left,
  Input,
  Item,
  Thumbnail
} from "native-base";
import Exponent from "expo"
const screenHeight = Dimensions.get("window").height;
const datas = [
  {
    name: "Home",
    route: "Home",
    icon: "home",
  },

  {
    name: "Business",
    route: "Home",
    icon: "briefcase",
  },
  {
    name: "Education",
    route: "Home",
    icon: "book",
  },
  {
    name: "Life Style",
    route: "Home",
    icon: "shirt",
  },
  {
    name: "Tech",
    route: "Home",
    icon: "phone-portrait",
  },
  {
    name: "Profile",
    route: "Profile",
    icon: "contact",
  },
  {
    name: "Settings",
    route: "Settings",
    icon: "settings",
  },
  {
    name: "Contact",
    route: "Contact",
    icon: "mail",
  },
  {
    name: "Log Out",
    route: "Signin",
    icon: "log-out",
  },
];

const DrawerContent = props => {

  return (
    <View style={styles.container}>
      <Content style={{marginTop: 20}}>
      <View style={styles.avatarview}>
      <Thumbnail source={require("../img/profile4.jpg")} style={{marginTop:40}}/>
      <Text style={styles.profiletext}> Jhon </Text>
      </View>
        <List
          dataArray={datas}
          renderRow={data =>
            <ListItem
              button
              noBorder
              onPress={() => props.navigation.navigate(data.route)}
            >
              <Left style={{marginLeft: 15}}>
                <Icon
                  active
                  name={data.icon}
                  style={styles.navicon}

                />
                <Text style={styles.navtext}>
                  {data.name}
                </Text>
                  }
              </Left>
            </ListItem>}
        />
      </Content>
    </View>
  );
};

const styles = {
  container: {
    height: screenHeight,
    backgroundColor: "#ffffff",
    flex: 1,
    paddingTop: Exponent.Constants.statusBarHeight,
  },
  avatarview: {
    height:200,
    backgroundColor:"#ffffff",
    alignItems:"center"
  },
  profiletext:{
    marginTop:30,
    color:"#ffffff"
  },

navicon:{
   color: "#222222",
   fontSize: 22,
   marginTop: Platform.OS === "ios" ? 1.8 : 4,
},
navtext:{
  color: "#222222",
   fontSize: 22,
    marginLeft: 15
},


};

export default DrawerContent;

我们正在使用原生基地和世博会。最有趣的是，eslint没有显示任何可能导致它的行。有什么问题，如何解决？

Answer 1

                </Text>
              }
          </Left>

您需要删除此括号。