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请参考此链接，以在分隔列表中添加分隔符

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

React Native FlatList separator between columns

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

1 个答案: