[英]Adjacent JSX elements must be wrapped in an enclosing tag for Images?
I looked up other answers such as using flex: 1
on View
and I still get the same error.我查找了其他答案,例如在
View
上使用flex: 1
,但仍然遇到相同的错误。 I think it has something to do with Image
tags next to each other?我认为这与彼此相邻的
Image
标签有关?
render() {
return (
<Container>
<Content
bounces={false}
style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
>
<FlatList
data={ this.state.dataSource}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<View style={{flex: 1}}>
{this.state.username ?
<Image source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>
<Image square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>
<Text style={styles.nameText}>{item.first_name} {item.last_name}</Text>
:
<Image source={drawerCover} style={styles.drawerCover} />
<Image square style={styles.drawerImage} source={drawerImage} />
}
</View>
}
keyExtractor={(item, index) => index}
/>
<List
dataArray={datas}
renderRow={data =>
<ListItem
button
noBorder
onPress={() => this.props.navigation.navigate(data.route)}
>
<Left>
<Icon
active
name={data.icon}
style={{ color: "#777", fontSize: 26, width: 30 }}
/>
<Text style={styles.text}>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg
}}
>
<Text
style={styles.badgeText}
>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
</Content>
</Container>
);
}
}
This is the drawer navigation and I want it to look similar to a material design.这是抽屉导航,我希望它看起来类似于材料设计。 And this is saying if the user is logged in then show that person's images.
这就是说,如果用户已登录,则显示该人的图像。 If not then the default images.
如果没有,则使用默认图像。
When using JSX you can only return a single element.使用 JSX 时,您只能返回一个元素。 In your solution there are multiple elements which are Image components .
在您的解决方案中有多个元素是 Image components 。 The way to solve this is to wrap all of them in a div.
解决这个问题的方法是将它们全部包装在一个 div 中。
I would not introduce new element to wrap the images and artificially mute the error, you can return a list (Array) of components as there is single parent element where it is rendered, I have removed some code for brevity:我不会引入新元素来包装图像并人为地消除错误,您可以返回一个组件列表(数组),因为在其中呈现单个父元素,为了简洁起见,我删除了一些代码:
/* CUT */
renderItem={({item}) =>
<View style={{flex: 1}}>
{this.state.username ?
[
<Image key='img-1' source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>,
<Image key='img-2' square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>,
<Text key='txt-1' style={styles.nameText}>{item.first_name} {item.last_name}</Text>
]
:
[
<Image key='img-1' source={drawerCover} style={styles.drawerCover} />,
<Image key='img-2' square style={styles.drawerImage} source={drawerImage} />
]
}
</View>
}
keyExtractor={(item, index) => index}
/>
/* CUT */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.