React native 两张牌并排反应

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

<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>

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

---

不确定这是不是你想要的，一排两张卡。因此，在react native中，您只需为父级设置

flex:1

，为子级设置

width:'100%

，它将自动除以2

。祖父母{
显示器：flex；
弯曲方向：立柱；
}
.家长{
display:flex；//在react native just flex:1中
}
.孩子{
背景色：#333；
高度：100px；
宽度：100%；
边框：1px实心#ccc；
文本对齐：居中；
颜色：#fff；
字体大小：30px；
}

1.
2.
3.
4.

不确定这是否是您想要的，连续两张卡。因此，在react native中，您只需为父级设置

flex:1

，为子级设置

width:'100%

，它将自动除以2

。祖父母{
显示器：flex；
弯曲方向：立柱；
}
.家长{
display:flex；//在react native just flex:1中
}
.孩子{
背景色：#333；
高度：100px；
宽度：100%；
边框：1px实心#ccc；
文本对齐：居中；
颜色：#fff；
字体大小：30px；
}

1.
2.
3.
4.

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

检查以下样本

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"
  }
});

import React，{Component}来自“React”；
从“react native”导入{视图、平面列表、样式表、文本、维度}；
const ScreenWidth=维度.get（“窗口”）.width；
常数数据=[
{
id:“1”，
标题：“1”
},
{
id:“2”，
标题：“2”
},
{
id:“3”，
标题：“3”
}
];
导出默认类示例扩展组件{
renderItems=（{item}）=>(
{item.title}
);
render（）{
返回(
项目id}
numColumns={2}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“中心”，
为内容辩护：“中心”
},
项目：{
宽度：（屏幕宽度-40）/2-10，
背景色：“000”，
填充：10，
玛吉：10，
marginHorizontal:10
},
标题：{
字体大小：32，
颜色：“fff”，
自我定位：“中心”
}
});

---

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

因为您正在尝试显示项目列表，请尝试使用FlatList或SectionList。使用React Native FlatList中的道具，您可以轻松显示多列布局

检查以下样本

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"
  }
});

import React，{Component}来自“React”；
从“react native”导入{视图、平面列表、样式表、文本、维度}；
const ScreenWidth=维度.get（“窗口”）.width；
常数数据=[
{
id:“1”，
标题：“1”
},
{
id:“2”，
标题：“2”
},
{
id:“3”，
标题：“3”
}
];
导出默认类示例扩展组件{
renderItems=（{item}）=>(
{item.title}
);
render（）{
返回(
项目id}
numColumns={2}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“中心”，
为内容辩护：“中心”
},
项目：{
宽度：（屏幕宽度-40）/2-10，
背景色：“000”，
填充：10，
玛吉：10，
marginHorizontal:10
},
标题：{
字体大小：32，
颜色：“fff”，
自我定位：“中心”
}
});

---

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

您需要在ScrollView添加卡片中添加ScrollView，然后在ScrollView添加属性horizontal={true}

您需要在ScrollView添加卡片中添加ScrollView，然后在ScrollView添加属性horizontal={true}

您能提供屏幕截图吗？@FeelRightz当然，只是更新答案你说的每张卡两张是什么意思？所以ATM，我每行有一张卡，即使在提供宽度后：每张卡40%，我希望它们是两张一行。。你知道，就像并排一样，所以我的一行每行有两张卡。我的答案是你想要的吗？你能提供截图吗？@FeelRightz当然，只是更新答案你说的每张卡两张是什么意思？所以ATM，即使在提供宽度后，我每行也有一张卡：每张40%，我希望它们是一行两张。。你知道，像并排的，所以我的一排会有两张卡片。我的答案是你想要的吗？