Как разделить элементы FlatList вертикальной и горизонтальной линиями в React-Native - PullRequest
Новая
       9

Как разделить элементы FlatList вертикальной и горизонтальной линиями в React-Native

0 голосов
/ 04 февраля 2020

Я бы хотел разделить элементы, которые у меня есть в моем Flatlist, вертикальной и горизонтальной линией, между элементами, как показывают зеленые линии. Я попытался с itemSeparator, но он просто создает горизонтальную линию. Данные жестко закодированы в ожидании базы данных. Я также пытался найти его в Google, но, похоже, это очень конкретный вопрос. Вот код, который у меня есть: 

render() {

    const { navigate } = this.props.navigation;
    let data = [{
      "equipo": "Equipo 1",
      "nombre": "App de cervezas"
    }, 
    {
      "equipo": "Equipo 2",
      "nombre": "Base de datos"
    }, 
    {
      "equipo": "Equipo 3",
      "nombre": "Anti-bullying"
    },
    {
      "equipo": "Equipo 4",
      "nombre": "No lo se"
    }, {
      "equipo": "Equipo 5",
      "nombre": "Valoracion de apps"
    }, {
      "equipo": "Equipo 6",
      "nombre": "Upcoming"
    },
    {
      "equipo": "Equipo 7",
      "nombre": "Upcoming"
    }, {
      "equipo": "Equipo 8",
      "nombre": "Upcoming"
    },
    ]

    return (
      <View style={styles.mainContainer}>

        <View style={styles.flatlistContainer}>

          <FlatList
            data={data}
            numColumns={2}

            renderItem={({ item }) => 

              <Producto 
                equipo={item.equipo}
                nombre={item.nombre}
              ></Producto>
            }

            keyExtractor={item => item.equipo}
          />

        </View>


        <TouchableOpacity><Text>Volver a intruducir usuario</Text></TouchableOpacity>

      </View>
    );
  }

Стили плоского списка 

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },

  flatlistContainer: {
    flex: 10/9,

    borderWidth: 1,
  },
})

Стили предметов 

itemContainer: {
      justifyContent: "center",
      alignItems: "center",

      marginLeft: 10,
      marginRight: 10,
      marginTop: 10,

      borderWidth: 1
    },

    item_LogoContainer: {
      flex: 1/2,
      justifyContent: "center",
      alignItems: "center",
    },

    item_DescriptionContainer: {
      flex: 1/3,
      justifyContent: 'center',
      alignItems: "center",

      marginTop: 5,
    },

Мой код продукта 

render() {
        return (
            <View style={styles.mainContainer}>

              <View style={styles.itemContainer}>

                <View style={styles.item_LogoContainer}>
                  <Image source={require('../images/LogoApp.png')} style={{ width: 100, height: 100 }}></Image>
                </View>

                <View style={styles.item_DescriptionContainer}>

                  <Text style={styles.textName}>
                    {this.props.nombre}
                  </Text>

                  <Text style={styles.textTeam}>
                    {this.props.equipo}
                  </Text>

                </View>

              </View>

            </View>
        );
    }

enter image description here

1 Ответ

1 голос
/ 04 февраля 2020
...