Question

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

我收到错误消息“错误：绑定失败：错误：src \ components \ Imagem.js：第10行的无效调用：require（name）”

似乎也无法使用map（）。

map（）无法正常工作（不知道为什么），我尝试更改代码以显示包含{name}的简单Text，但不显示（不通过数组“ locations”运行）；当我尝试仅使用{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

地图应返回具有更改项目的新数组。

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

或

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

还请记住向Image添加关键道具；）

Answer 2

由于my_list = [ [[1_a1,1_a2,1_a3...,1_a128],[1_b1,1_b2,1_b3...,1_b128]], [[2_a1,2_a2,2_a3...,2_a128],[2_b1,2_b2,2_b3...,2_b128]], ......, [[5000_a1,5000_a2,5000_a3...,5000_a128],[5000_b1,5000_b2,5000_b3...,5000_b128]] ]与for i in range(0,len(empty),1): #empty is my_list fig1 = plt.figure() plt.plot(empty[i][0],empty[i][1], 'r', linewidth=1) plt.grid(True) plt.xlabel('Heat flow in kW') plt.ylabel('Temperature in C') plt.show()（几乎）相同，因此对于装入的模块始终需要一个静态位置。它不适用于动态值。但是您可以尝试将需求上移到您的require

import

然后将其用作App内的普通属性

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

我不确定这是否可以立即使用，还是您必须在此处处理一些异步内容。

Answer 3

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

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

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

希望这会对您有所帮助。

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

3 个答案: