我不确定这是否是我遗漏的规则,但是我有一个嵌套组件,该组件无法通过样式表或嵌入式样式应用样式:
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={
<View style={styles.subtitleView}>
<Text>
<MaterialIcons name={item.icon} size={12} style={{ color: colors.BLACK }}/>
{" "}
{item.subtitle}
</Text>
</View>
}
leftAvatar={{ source: { uri: item.avatar_url } }}
rightAvatar={
<View style={styles.priceView}>
<Text>{item.price}</Text>
</View>
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={{
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
}} />}
onPress={() => console.log(item.name)}
/>
)
此<ListItem />
位于我的<FlatList />
内部,如下所示:
render () {
return (
<FlatList
keyExtractor={this.keyExtractor}
data={list}
renderItem={this.renderItem}
/>
)
}
并且样式是普通样式,如下所示:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.TURQUOISE
},
subtitleView: {
flexDirection: 'row',
paddingLeft: 10,
paddingTop: 5,
borderColor: colors.GREEN
},
priceView:{
fontWeight: 'bold',
fontSize: '18',
color: colors.BLUE,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
什么都没有应用,但是我不确定为什么。没有引发任何错误或任何指示缺少某些东西的东西。