我查找了其他答案,例如在 View
上使用 flex: 1
,我仍然得到同样的错误 . 我认为这与 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>
);
}
}
这是抽屉导航,我希望它看起来类似于材料设计 . 这就是说如果用户登录然后显示该人的图像 . 如果没有那么默认图像 .
2 回答
使用JSX时,您只能返回单个元素 . 在您的解决方案中,有多个元素是Image组件 . 解决这个问题的方法是将所有这些包装在div中 .
我不会引入新元素来包装图像并人为地将错误静音,你可以返回一个组件列表(Array),因为它有单个父元素呈现它,为了简洁,我删除了一些代码: