FlatList 列表项背景颜色

Question

是否可以将 FlatList 的 backgroundColor 设置为透明？

我有 appbackground 图片，想将其用作屏幕背景。

但 FlatList 中的 ListItem 似乎需要设置一些颜色。 标题也是同样的问题。

    <FlatList
      style={styles.root}
      data={contacts}
      getItemLayout={this.getItemLayout}
      ItemSeparatorComponent={this.renderSeparator}
      keyExtractor={this.extractItemKey}
      renderItem={this.renderItem}
      enableEmptySections />

renderItem = ({ item }) => {
        return (
        <TouchableOpacity onPress={this.onPress}>
          <View style={styles.container}>
            <Avatar type='circle' style={styles.avatar} img={this.getAvatar(image, gender)} />
           <View style={{flexDirection: 'column'}}>
             <Text style={styles.text}>{`${lastName} ${firstName}`}</Text>
             <Text style={styles.phone}>{`${mobilePhone}`}</Text>
           </View>
          </View>
         </TouchableOpacity>
        );
    }

类似这里：

Answer 1

是的，只是不要在您的 FlatList 上设置 backgroundColor 并确保您的 Image 在 FlatList 下方。

如果这不起作用，请使用 rgba(255, 255, 255, 0.0) 设置颜色，这会将 alpha 设置为零，这意味着颜色是透明的。

https://facebook.github.io/react-native/docs/colors

这是一个快餐https://snack.expo.io/8nM1LgJqR，在FlatList 或行项目上没有设置backgroundColor。

这里是代码

import React, {Component} from 'react';
import { View, StyleSheet, FlatList, Text, Image } from 'react-native';
export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      data: [
        {
          title: 'Card 1', city: 'London'
        },
        {
          title: 'Card 2', city: 'London 2'
        },
        {
          title: 'Card 3', city: 'London 3'
        },
        {
          title: 'Card 4', city: 'London 4'
        },
        {
          title: 'Card 5', city: 'London 5' 
        },
        {
          title: 'Card 6', city: 'London 6'
        },
        {
          title: 'Card 7', city: 'London 7'
        },
        {
          title: 'Card 8', city: 'London 8'
        },
        {
          title: 'Card 9', city: 'London 9'
        },
        {
          title: 'Card 10', city: 'London 10'
        },
      ]
    }
  }

    renderItem = ({ item }) => {
      return (
        <View style={{height: 100, borderWidth: 1, width: '100%'}}>
          <Text>{item.title}</Text>
        </View>

      );
    }
  
  render() {
    return (
      <View style={styles.container}>
      <Image style={{height: '100%', width: '100%', position:'absolute'}} source={{uri: 'https://i.stack.imgur.com/t96aT.jpg'}} />
      <FlatList
        style={{flex:1}}
        data={this.state.data}
        showsHorizontalScrollIndicator={false}
        keyExtractor={item => item.title}
        renderItem={this.renderItem}
      />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});