이 사이드 바 구성 요소의 문제점은 무엇입니까? 그것은 원시 텍스트 "}"는 명시 적 텍스트 구성 요소에 래핑되어야합니다

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; 

우리는 native-base 및 expo를 사용하고 있습니다. 가장 흥미로운 점은 eslint가 그 문제를 일으킬 수있는 행을 표시하지 않는다는 것입니다. 무엇이 잘못되었으며이 문제를 어떻게 해결할 수 있습니까?

Answer 1

   </Text> 
       } 
      </Left> 

이 브래킷을 제거해야합니다.