使用 .map 和匿名函数时遇到问题（React Native）

Question

创建了一个名为“imagem”的组件，该组件应显示从数组接收到其位置的图像。

我收到错误“错误：捆绑失败：错误：src\components\Imagem.js:Invalid call at line 10: require(name)”

似乎 map() 也不起作用。

• map() 不起作用（不知道为什么），我尝试更改代码以显示包含 {name} 的简单文本，但它不显示（未通过数组“位置”运行）； 当我尝试使用仅带有 {locations[0]} 的 Text 的 map() 时，它会显示

• 关于 require()，我不知道为什么它不起作用： 如果我创建一个具有 '../imagem/teste.png' 的局部变量并在 require(example) 中使用它，它就可以工作， 如果我从道具中收到它，它不会

(app.js)

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

import Imagem from './src/components/Imagem';

export default class App extends Component{
  render() {
    return(
      <View>
        <Imagem locations = {['./src/imagem/teste.png', './src/imagem/teste2.png']}/>
      </View>
    );
  }
}

(Imagem.js)

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


export default class Imagem extends Component{
    render(){
        const {locations} = this.props;
        return (
            locations.map(name =>{
                <Image source={require(name)} style = {styles.img}/>
            })
        );
    }
}

const styles = StyleSheet.create({
    img:{
        width:30,
        height:30
    }
})

我希望我可以使用我的组件“Imagem.js”发送一系列位置，然后它会在应用屏幕上显示图像。

我是菜鸟，请帮忙

Answer 1

在 map 函数中，你应该返回一些东西。它将添加到最终结果数组中。看来您的Imagem 组件可以简单地写成如下。

export default Imagem = (props) => (
    props.locations.map(name => <Image source={name} style = {styles.img} />)
)

作为 es6 箭头函数的行为，在locations.map(name => <Image />) 代码段中将创建您预期的输出。

希望这会对你有所帮助。

Answer 2

Map 应该返回带有更改项的新数组。

locations.map(name => {
  return <Image source={name} style={styles.img} />
})

或

locations.map(name => <Image source={name} style={styles.img} />)

记得给 Image 添加 key prop ;)

Answer 3

因为require （几乎）与import 相同，所以您总是需要一个静态位置来加载模块。它不适用于动态值。 但是您可以尝试将要求移至您的App

<Imagem locations = {[require('./src/imagem/teste.png'), require('./src/imagem/teste2.png')]}/>

然后将其用作Imagem中的普通属性

locations.map(name => <Image source={name} style = {styles.img} />)

我不太确定这是否可以开箱即用，或者您必须在这里处理一些异步的东西。