React Native FlatList的错误

Question

我有React Native FlatList的问题，

export default class PoolList extends Component {
    constructor(props) {
        super(props)
        this.state = {
          data: [
            {key: 1, img: './resources/image1.png', txt: 'Text 1'}, 
            {key: 2, img: './resources/image2.png', txt: 'Text 2'}, 
            {key: 3, img: './resources/image3.png', txt: 'Text 3'}
          ]
        }
      }

      render() {
        return (
          <View style={styles.view}>
            <FlatList
              data={this.state.data}
              renderItem={({item}) => 
                  <View style={styles.flatListItem}>
                    <Image source={require(item.img)} />
                    <Text>{item.txt}</Text>
                  </View>
              }
            />

          </View>
        );
    }
}

运行时我遇到了一个bug

require（）必须有一个字符串文字参数

但是，当我将<Image source={require(item.img)} />改为<Image source={require('./resources/image1.png')} />时，它确实有效。有人可以向我解释原因。我需要创建一个带有Image动态的FlatList，谢谢

Answer 1

我花了很长时间才弄清楚这个问题的解决方法。不用担心，require() must have a single string literal argument在JavaScript社区中是一个非常常见的问题，因为require在变量作为字符串参数传递时存在很多问题。

这是我能想到的最好的解决方法。

因此，我决定使用地图而不是使用平面列表。首先，您需要为要从本地目录动态导入的每个图像创建constants。然后你需要创建一个array的objects所以每个object将是你的image constants之一。现在，使用map遍历每个条目并生成<Image>组件。最后，使用刚刚创建的所有组件渲染变量。

要查看我编写的解决方案的完整代码，请访问我创建的ExpoSnack。 https://snack.expo.io/HyNO-pLQG SnackExpo还包含一个浏览器内设备模拟器。 要在物理设备上运行此应用程序，您可以下载Expo应用程序，然后扫描ExpoSnack提供的QR码。

import React, {Component} from 'react';
import {View, Image, StyleSheet} from 'react-native';

const image1 = require('./resources/image1.png');
const image2 = require('./resources/image2.png');
const image3 = require('./resources/image3.png');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
});

var dataArray = [
  {data: image1},
  {data: image2},
  {data: image3},
];

var theReturnData = dataArray.map((item) => (
  <View key={item}>
    <Image
      style={styles.image}
      source={item.data}
    />
  </View>
));

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        {theReturnData}
      </View>
    );
  }
}