样式未应用于嵌套的React Native组件

时间:2019-07-02 22:44:53

标签: react-native

我不确定这是否是我遗漏的规则,但是我有一个嵌套组件,该组件无法通过样式表或嵌入式样式应用样式:

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,
  },
});

什么都没有应用,但是我不确定为什么。没有引发任何错误或任何指示缺少某些东西的东西。

0 个答案:

没有答案