Цвет фона элемента списка FlatList - PullRequest
Новая
       8

Цвет фона элемента списка FlatList

0 голосов
/ 21 января 2019

Можно ли установить backgroundColor для FlatList как прозрачный?

У меня есть изображение appbackground и я хочу использовать его в качестве фона экрана.

Но ListItem в FlatList, кажется, требует установить какой-то цвет. Тот же вопрос к заголовку. 

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

Примерно так:

enter image description here

1 Ответ

0 голосов
/ 21 января 2019

Да, просто не устанавливайте backgroundColor в вашем FlatList и убедитесь, что ваше изображение ниже FlatList.

Если это не сработает, установите цвет с помощью rgba(255, 255, 255, 0.0). При этом альфа устанавливается на ноль, что означает, что цвет прозрачный.

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