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，并确保您的图片在FlatList下方。

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

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

这是快餐https://snack.expo.io/HJsK_FQXN，在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: 'https://png.pngtree.com/thumb_back/fw800/back_pic/03/87/17/0857d1192214be1.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,
  }
});

FlatList列表项背景色

1 个答案: