Question

我想使用本机构建一个专辑应用，主要想法是使用sectionList并在数组中显示数据：

class CustomImage extends Component{
  render(){
    return(
      <View>
          <Image style={styles.Img} source={this.props.imageName} />
          <Text style={styles.text}>{this.props.name}</Text>
      </View>
    );
  }
}

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
      <SectionList
          sections={[
            {titile: 'small soldier', data: ["./gifs/2.gif", "./gifs/3.gif", "./gifs/4.gif"]}

          ]}
          renderItem={({item}) => <CustomImage name={item} fromWeb={false} imageName={require(item)} />}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
      />
      </View>
    );
  }
}

以上代码缩进，以使this answer

激发灵感

我已经将gifs文件夹放在项目文件夹下了，如果我在source={require(url)}组件中使用静态字符串Image，那么事情就会起作用，但是当url来了在数组项迭代中，它将无法工作。

如何使用本机做反应？

修改

不知道我是否可以编辑以更具体地进行编辑，我真正想要做的就是使用这样生成的数组：

function numberRange(start, end){
  return new Array(end-start).fill().map((d,i) => {
    var url = "./gifs/" + ( i+start) + ".gif";
    return require(url)
  });
}
export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
      <SectionList
          sections={[
            {title: 'small soldier', data: numberRange(2,30)},
            {title: 'small soldier', data: numberRange(31,60)}

          ]}
          renderItem={({item}) => <CustomImage name={item} fromWeb={false} imageName={item} />}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
      />
      </View>
    );
  }
}

不知道是否有办法使用这个数组生成器制作数组，或者我必须一个接一个地进入路径： - （

Answer 1

{ "A": [{ "id": "1", "vehicle": { "model": "toyota" } },{ "id":"2", "vehicle": { "model": "vios" } },{ "id":"3", "vehicle": { "model": "honda" } },{ "id":"4", "vehicle": { "model": "eon" } },{ "id":"5", "vehicle": { "model": "motor" } }] } --------------------------------------------------------- { "B": [{ "model": "volkswagen" },{ "model": "hyundai" },{ "model": "honda" },{ "model": "mitsubishi" },{ "model": "bmw" }] }是一个javascript关键字，具有预加载性质。

并且，图像与运行时的路径无关 - 提供它的路径不会得到任何东西。它变成了捆绑资源，因此require只能看到与捆绑ex：console.log _1相关的资源令牌。

即使将_2更改为require("./gifs/1.gif")，也无效。

试试这个：

require("./gifs/"+"1.gif")

如何使用react native动态显示图像

修改

1 个答案: