这个边栏组件有什么问题？它显示原始文本“}”必须用明确的文本组件包装

-1

此代码在最后一天工作。当我们尝试分离它时显示此错误。我确信这个组件中的麻烦就在于其他组件完美地工作。可能是什么原因呢？您可以检查下面的代码：

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没有显示任何可能导致它的行。什么是错的，如何解决这个问题？

来源

2017-11-11 NewTech Lover

在'DrawerContent'中''后面有一个额外的'}' – bennygenel

由于在和之间有一些额外的空间，因此出现此错误。你需要检查这个错误实际增加的空间。 –

   </Text> 
       } 
      </Left>

您需要移除该支架。

来源

2017-11-11 09:56:42

非常感谢它的工作。 –

这个边栏组件有什么问题？它显示原始文本“}”必须用明确的文本组件包装

回答

相关问题