Блог

Главная - Вопросы по программированию - Реагировать на собственный список изображений плоского списка

Реагировать на собственный список изображений плоского списка

#javascript #react-native

Вопрос:

Я ищу кого-то, кто мог бы помочь мне просто разместить изображения в сетке плоского списка. Мне удалось заставить его работать с текстом, но не с изображениями в папке «Ресурсы».

Я хочу, чтобы отдельные изображения, которые будут храниться в папке «Ресурсы», были в полях сетки плоского списка.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация!

Вот код:

 import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity, FlatList, Dimensions } from 'react-native';
import { drawer } from '../navigation/AppNavigation';
import { hp, wp } from '../utils/responsiveScreen';

const dataList = [{ key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' },{ key: '6' },{ key: '6' },{ key: '6' }]


const numColums = 2

const WIDTH = Dimensions.get('window').width


const Main = () => {

  formatData = (data, numColums) =>{

    const totalRows = Math.floor(data.length / numColums)
    let totalLastRow = dataList.length - (totalRows * numColums)

    while(totalLastRow !== 0 amp;amp; totalLastRow !== numColums){
      dataList.push({'key': 'blank', empty: true})
      totalLastRow  
    }
    return dataList

  }
  _renderItem = ({ item, index }) => {

    let {itemStyle, itemText} = styles

    if(item.empty){
      return <View style={[itemStyle]}/>
    }

    return (
      <View style={itemStyle}>
        <Text style={styles.itemText}>{item.key}</Text>
      </View>
    )
  }
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={{ height: 50 }}
        onPress={() => drawer.current.open()}>
        <Image source={require('../assets/menu.png')} />
      </TouchableOpacity>
      <Text style={styles.textStyle}>Stars</Text>

      <FlatList
        data={this.formatData(dataList, numColums)}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => index.toString()}
        numColumns = {numColums}
      />

    </View>
  );
};

А вот таблица стилей:

 const styles = StyleSheet.create({
  container: {
    
    flex: 1,
    backgroundColor: 'white',
    paddingTop: hp(7),
    paddingHorizontal: wp(6),
  },
  
  textStyle: {
    marginBottom: 20,
    fontWeight: 'bold',
    fontSize: 24,
    color: 'black',
  },
  image: {
    alignSelf: 'center',
    height: hp(40),
    width: hp(40),
    marginTop: hp(3),
  },

  itemStyle: {
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
    height: 150,
    flex: 1,
    margin:1,
    width: WIDTH / numColums
  },
  itemText: {
    fontSize: 50
  }
  
});

Я приложил изображение того, как это выглядит сейчас:
Здесь

Обновить

Я обновил datalist до этого:

 const dataList = [{ key: '1',image: required('../assets/backGround.png')}, { key: '2',image: required('../assets/backGround.png') }, { key: '3' ,image: required('../assets/backGround.png')}]

И взгляд на это:

   <View style={itemStyle}>
    {/* <Text style={styles.itemText}>{item.key}</Text> */}
    <Image
      style={styles.image}
      source={item.image}
    />
  </View>

и теперь я понимаю ошибку:

 TypeError: (0, _reactNative.required) is not a function. (In '(0, _reactNative.required)('../assets/backGround.png')', '(0, _reactNative.required)' is undefined)

Комментарии:

1. Вы можете визуализировать изображение в своей функции _renderItem. перед этим вы должны добавить свои изображения в свой список данных (dataList).

2. const dataList = [{ ключ: ‘1’ , изображение: требуется(‘address_to_first_image’)}, { ключ: ‘2’, изображение: требуется(‘address_to_second_image’) }]. В _renderItem возвращаем <Источник изображения={item.image} стиль={стили.изображение />

3. вы джентльмен, спасибо вам!

4. @Majidlotfinia Я обновил код с новой проблемой, так как это не полностью сработало, не могли бы вы взглянуть еще раз, пожалуйста?

5. вы допустили опечатку, это require(..) не так required(...)

Ответ №1:

 const dataList = [{ key: '1',image: required('../assets/backGround.png')}, { key: '2',image: required('../assets/backGround.png') }, { key: '3' ,image: required('../assets/backGround.png')}]

должно быть

 const dataList = [{ key: '1',image: require('../assets/backGround.png')}, { key: '2',image: require('../assets/backGround.png') }, { key: '3' ,image: require('../assets/backGround.png')}]

Ответ №2:

вам нужно добавить require() в источник в теге изображения

Метки: