Изображения актива не отображаются в экспозиции плоского списка

Question

EDIT:

Я нашел ответ на мою проблему здесь: Реагировать на собственные динамические изображения

У меня есть экран категорий, и для каждой категории я хочу, чтобы изображение отображалось. Я пытаюсь отобразить изображения в виде плоского списка вместе с названием категории. Изображения поступают из папки ресурсов, если я жестко закодирую значение источника изображения

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

Затем отображается изображение, но затем, очевидно, одно и то же изображение отображается для каждого элемента в плоском списке.

(В приведенном ниже примере кода я включил iconSrc только для 2 элементов, так как если я смогу заставить 2 работать, я смогу заставить их всех работать.)

У меня есть 12 изображений в папке ресурсов, по одному для каждой категории. У меня есть плоские списки в других частях приложения, которые получают изображения из магазина и отображают их нормально, но просто не могу понять, что я делаю здесь неправильно. Любая помощь будет принята с благодарностью, спасибо!

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