如何在 React-Native 中用垂直线和水平线划分 FlatList 项目

Question

我想在项目之间用垂直线和水平线分隔 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>
        );
    }

Answer 1

@Aldimir 请参考此 link，以在 flatlist

中添加分隔符

https://www.techiediaries.com/react-native-tutorial/flatlist-header-separators/

如何在 React-Native 中用垂直线和水平线划分 FlatList 项目

How to divide FlatList items with a vertical and horizontal line in React-Native

css

react-native

react-native-flatlist