两张卡并排反应原生答案

【问题标题】：Two cards side by side react native两张卡并排反应原生
【发布时间】：2020-01-04 13:39:27
【问题描述】：

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

<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%',
  },

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

【问题讨论】：

可以提供截图吗？
@FeelRightz 当然，只是更新答案
每张两张卡是什么意思？
所以 ATM，即使在为每个提供 width:40% 之后，我每行都有一张卡，我希望它们连续两张 .. 你知道，就像并排一样，所以我的每行会有两张牌。
我的答案就是你要找的吗？

标签： react-native flexbox

【解决方案1】：

不确定这是不是您想要的，连续两张卡。因此，在 react-native 中，您可以将 flex:1 设置为父级，并将 width:'100%' 设置为子级，它会自动除以 2。

.grandparent{
 display:flex;
 flex-direction:column;
}
.parent{
  display:flex; // in react-native just flex:1
}

.child{
  background-color:#333;
  height:100px;
  width:100%;
  border:1px solid #ccc;
  text-align:center;
  color:#fff;
  font-size:30px;
}

<div class="grandparent">
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
  </div>
  <div class="parent">
    <div class="child">3</div>
    <div class="child">4</div>
  </div>
</div>

【讨论】：

【解决方案2】：

由于您尝试显示项目列表，请尝试使用 FlatList 或 SectionList。在 React Native FlatList 中使用 numColumns 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"
  }
});

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

【讨论】：

【解决方案3】：

你需要在ScrollView里面添加ScrollView添加卡片然后在ScrollView添加属性horizontal={true}

【讨论】：