react-native - 两张并排的卡片 react 原生

Question

我引用了很多地方，但问题仍然存在，我这里有一个卡片列表，仅显示四张卡片，现在我希望每行各有两张卡片，但无法这样做。这是引用代码。

<View style={styles.panelBox}>
      <TouchableOpacity
      activeOpacity={1}
        onPress={() => navigation.navigate('ExploreCareersIndex', { pathway_id: pathway.id })}
        style={[styles.card]}>
        <ImageBackground
          resizeMode='cover'
          style={styles.cardBody}
          imageStyle={styles.imageRadius}
          source={{uri: pathway.avatar_url}}>
        </ImageBackground>

        <Text style={styles.textImageStyle}>{pathway.name}</Text>
      </TouchableOpacity>
    </View>

和CSS

panelBox: {
    paddingHorizontal: 15,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor:'blue',
    flexDirection:'row',
    flexWrap:'wrap',
    flex:1,
    flexBasis:2,

  },
  card: {
    backgroundColor: Colors.white,
    width: "40%",
    height:130,
    textAlign: "center",
    backgroundColor:'red',
  },
  cardBody: {
    padding: 10,
    justifyContent: "space-between",
    overflow: "hidden",
    shadowColor: Colors.black,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    height: 80,
  },
  imageRadius: {
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
  },
  cardtitle: {
    textAlign: "left",
    fontSize: 12,
    lineHeight: 16,
    color: Colors.white,
    fontFamily: primaryFont.fontMedium,
    paddingRight: 10,
  },
  textImageStyle: {
    textAlign: 'center',
    fontSize: 12.5,
    fontFamily: primaryFont.fontMedium,
    marginTop: 5,
    color: Colors.gray4,
    height: '100%',
  },

仍然不确定为什么它不起作用。如果您仍然需要更多引用，我也可以提供一些屏幕截图。

Answer 1

由于您正在尝试显示项目列表，请尝试使用 FlatList 或 SectionList。使用numColumns React Native FlatList 中的 Props 可以轻松显示多列布局。

检查下面的示例

import React, { Component } from "react";
import { View, FlatList, StyleSheet, Text, Dimensions } from "react-native";

const ScreenWidth = Dimensions.get("window").width;

const DATA = [
  {
    id: "1",
    title: "1"
  },
  {
    id: "2",
    title: "2"
  },
  {
    id: "3",
    title: "3"
  }
];

export default class Example extends Component {
  renderItems = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={DATA}
          renderItem={this.renderItems}
          keyExtractor={item => item.id}
          numColumns={2}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  item: {
    width: (ScreenWidth - 40) / 2 - 10,
    backgroundColor: "#000",
    padding: 10,
    marginVertical: 10,
    marginHorizontal: 10
  },
  title: {
    fontSize: 32,
    color: "#fff",
    alignSelf: "center"
  }
});

如果您有任何疑问，请随时询问。希望这会对您有所帮助。