javascript - 使用 map 函数遍历要在元素中呈现的对象数组

Question

我正在使用一个允许在幻灯片中呈现 View 的包。

我试图通过创建包含文本和图像源字符串的对象数组来遍历每个 View 。

我有两种方式:

创建这个。 render() 方法中的函数，并在页面元素内的“{this.function}”中调用它。

&

import React, { Component } from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import { Pages } from 'react-native-pages'

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default class Walkthrough extends Component {
  render() {
    const pages = [{
      text: 'first slide',
      imageSource: './images/hello.png',
    },
    {
      text: 'second slide',
      imageSource: './images/hello.png',
    },
    {
      text: 'third slide',
      imageSource: './images/hello.png',
    }]
    return (
      <Pages>
        { pages.map(([value, index]) => {
          return (
            <View key={index}>
              <Image uri={value.imageSource} />
              <Text> {value.text} </Text>
            </View>
          )
        })}
      </Pages>
    )
  }
}

我继续收到此错误:与 babel 相关的“无效尝试解构不可迭代实例”。

我的babel相关依赖:

"devDependencies": {
    "babel-eslint": "^8.0.1",
    "babel-jest": "21.2.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-preset-react-native": "4.0.0",
 },

Answer 1

你对array.map的使用出错，应该是array.map(function(arrayItem, index) {})，而不是[arrayItem, index]，

对于您的代码:

return (
  <Pages>
    { pages.map((value, index) => {
      return (
        <View key={index}>
          <Image uri={value.imageSource} />
          <Text> {value.text} </Text>
        </View>
      )
    })}
  </Pages>
)