javascript - FlatList 列表项背景颜色

Question

是否可以将 FlatList 的背景颜色设置为透明？

我有应用程序背景图像并想将其用作屏幕背景。

但是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

是的，只是不要设置 backgroundColor在您的 FlatList 上，并确保您的图像位于 FlatList 下方。

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

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

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

这是代码

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: '/image/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,
  }
});