Question

编辑：

我在这里找到问题的答案： React Native Dynamic Images

我有一个类别屏幕，对于每个类别，我都希望显示一张图像。我正在尝试在平面列表中显示图像以及类别名称。如果我对图片来源的值进行了硬编码

，则图片来自资产文件夹

source={require("../../assets/image.png")}

然后显示图像，但是很明显，平面列表中的每个项目都显示相同的图像。

（在下面的代码示例中，我仅包含了2个项目的iconSrc，因为如果我可以使2个项目正常工作，那么我可以使它们全部正常工作。）

我在素材资源文件夹中有12张图片，每个类别一张。我在应用程序的其他部分中有固定的列表，这些列表是从Firestore获取图像并将它们显示得很好，但似乎无法弄清楚我在这里做错了什么。任何帮助将不胜感激，谢谢！

export default class CategoriesScreen extends Component {
constructor(props) {
super(props);

this.state = {
  CategoryItems: [
    {key: "All Events", iconSrc: "../../assets/categoryicons/calendar.png"},
    {key: "Music", iconSrc: "../../assets/categoryicons/music.png"},
    {key: "Food & Drink"},
    {key: "Theatre"},
    {key: "Charities & Causes"},
    {key: "Talk"},
    {key: "Health & Wellbeing"},
    {key: "Art"},
    {key: "Family"},
    {key: "Comedy"},
    {key: "Sports & Fitness"},
    {key: "Other"}
  ]
};
}

render() {
return (
  <View style={styles.container}>
    <FlatList
      data={this.state.CategoryItems}
      renderItem={({item}) => (
        <TouchableOpacity
          delayPressIn={50}
          onPress={this.onCategoryItemClick.bind(this, item.key)}
          style={styles.GridViewContainer}>
          {/*<Ionicons name={item.iconName} size={80} color="#0075B4" />*/}
          <Image
            style={{height: 80, width: 80}}
            source={{uri: item.iconSrc}}
          />

          <Text style={styles.GridViewTextLayout}>{item.key}</Text>
        </TouchableOpacity>
      )}
      numColumns={2}
    />
  </View>
);
}
}

Answer 1

如果我正在查看的代码是您的代码，则CategoryItems列表中只有一个图片文件。因此，您只能显示一张图片。

避免使用相同名称的变量对代码有利。

FlatListData示例：

sitterdata = [
  {
    id: 1,
    image:
      "https://postfiles.pstatic.net/MjAxOTAxMTVfMjk3/MDAxNTQ3NTEzMDI1MDEx.ODD9YUUNc5YSk4Zz1wTgxmpf_BRr154ekJ-vJQ1f3ocg.u1uIXInfJ3O2PTKFmKFaI46epH_e8IzD5TEB96K-eF4g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.42.43.png?type=w966",
    introduce: "hi hello",
    address: "Rondon",
    user:
      "https://postfiles.pstatic.net/MjAxOTAxMTVfOTQg/MDAxNTQ3NTEyODU0NDk4.DcAvlx3CGY9pGFlgWZA7mIr6_SCt8h_gGaHYGAFlDIYg.bQ9kBiykOzlbxyIyQ3nTCO7lGw4NVmmIeDV7pz0OX94g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.28.54.png?type=w966",
    by: "bon"
  },
  {
    id: 2,
    image:
      "https://postfiles.pstatic.net/MjAxOTAxMTVfMTMx/MDAxNTQ3NTEzMDMzMDgx.SbY_nsX7oK4UlZGzre6U5dLHinRfCoAYyvnSzXuZR7cg.5K3sX7E0bDpgyzDifD174hfQBOnJDtLVFqTe8BHH7Gcg.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.42.57.png?type=w966",
    introduce: "nihao",
    address: "china",
    user:
      "https://postfiles.pstatic.net/MjAxOTAxMTVfMjU2/MDAxNTQ3NTEyODY3MTE2.X4LDN12uIgRkOFrUChl0s9UnKiu9VOPEOkWbIRHPDpgg.DrmXUbVURwsTuGs5dlOL_wugRf1nnANxWSIN4jYkdX0g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.29.23.png?type=w966",
    by: "son"
  },
  {
    id: 3,
    image:
      "https://postfiles.pstatic.net/MjAxOTAxMTVfOTIg/MDAxNTQ3NTEzMDM3MDAy.p_CNMU7vlCaELYpfuqf6H9GrCEPe9BzFdeNojFuKGc4g.65lwFvImqL2QgC01mNPzIUbY0tgBz4lukZplv9NZkJAg.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.43.14.png?type=w966",
    introduce: "haha",
    address: "New York",
    user:
      "https://postfiles.pstatic.net/MjAxOTAxMTVfMjY4/MDAxNTQ3NTEzMDE5MDI2.fmBkO0W8lFwWCzo3KrJ3EDkTTZ_NmAKH0wlF050XMcYg.GJ8JTbs5nQNosj1ZhkK-1lm-ah2LIAN7i_d3hjIQ4K8g.PNG.dea972/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2019-01-15_%EC%98%A4%EC%A0%84_9.42.09.png?type=w966",
    by: "jhon"
  }
]

renderItem示例：

renderItem = ({ item }) => {
    return (
      <TouchableHighlight style={styles.containerCell}>
        <View>
          <TouchableOpacity
            onPress={() => this.showAlert(this.props.navigation)}
          >
            <Image
              style={{
                width: width,
                height: 180,
                resizeMode: "stretch"
              }}
              source={{ uri: item.image }}
            />
          </TouchableOpacity>
          <View style={styles.footerContainer}>
            <View style={styles.petImageUrl}>
              <Image
                style={styles.imageAvatar}
                source={{ uri: item. user }}
              />
            </View>
            <View style={styles.footerTextContainer}>
              <Text style={styles.text}>{item.introduce}</Text>
              <Text style={[styles.text2, styles.textTitle]}>
                {item.address}
              </Text>
              <Text style={[styles.text2, styles.textBy]}>By {item.by}</Text>
            </View>
          </View>
        </View>
      </TouchableHighlight>
    );
  };

资产图像未显示在平面列表博览会中

1 个答案: