Question

我正在尝试设置ListItem组件的背景色：

<FlatList
  data={this.props.search.videos}
  renderItem={({ item }) => (
    <View style={{ backgroundColor: "red" }}>
      <ListItem
        title={item.title}
        onPress={() => this.onPress(item.id)}
      />
    </View>
  )}
  contentContainerStyle={{
    backgroundColor: "red",
    overflow: "hidden",
    backgroundColor: "#00336690"
  }}
  keyExtractor={item => item.id.toString()}
  ItemSeparatorComponent={this.renderSeparator}
/>

backgroundColor始终显示为白色，如何更改？

ListItem：

<ListItem
  underlayColor="red"
  style={{ backgroundColor: "#000" }}
  title={item.title}
  onPress={() => this.onPress(item.id)}
/>

Answer 1

我认为您需要在ListItem本身上设置样式。

 <FlatList
    data={this.props.search.videos}
    renderItem={({ item }) => (
                    <View>
                        <ListItem
                            title={item.title}
                            onPress={() => this.onPress(item.id)}
                            style={{ backgroundColor: "red" }}
                        />
                    </View>
                )}
                contentContainerStyle={{
                    backgroundColor: "red",
                    overflow: "hidden",
                    backgroundColor: "#00336690"
                }}
                keyExtractor={item => item.id.toString()}
                ItemSeparatorComponent={this.renderSeparator}
            />

Answer 2

尝试从

删除一种backgroundColor

contentContainerStyle={{
                backgroundColor: "red",
                overflow: "hidden",
                backgroundColor: "#00336690"
            }}

像这样

<FlatList
                contentContainerStyle={{
                    backgroundColor: "red",
                    overflow: "hidden",
                }}
                data={this.props.search.videos}
                renderItem={({ item }) => (
                    <View>
                        <ListItem 
                            style={{ backgroundColor: "red" } }
                            title={item.title}
                            onPress={() => this.onPress(item.id)}
                        />
                    </View>
                )}
                keyExtractor={item => item.id.toString()}
                ItemSeparatorComponent={this.renderSeparator}
            />

FlatList组件无法设置样式

2 个答案: