Question

我正在寻找可以帮助我在平面列表网格中处理图像的人。我能够让它处理资产文件夹中的文本而不是图像。

我希望将单独的图像存储在资产文件夹中，以位于平面列表网格的框中。

如果您需要更多信息，请告诉我！

代码如下：

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

我附上了一张现在的样子： Here

更新

我已将数据列表更新为：

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)

Answer 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')}]

Answer 2

需要在图片标签中的source中添加require()

反应本机平面列表图像列表

2 个答案: