マップ関数を使用して、要素内でレンダリングされるオブジェクトの配列を調べる

Question

私は、スライド内のビューのレンダリングを可能にするパッケージを使用しています。

私は、テキストとイメージのソース文字列を含むオブジェクトの配列を作成して、各ビューを調べようとしています。

私はそれを2つの方法で行っています。

これを作成します。レンダリング（）メソッドの中で関数を呼び出し、ページ要素内の "{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> 
    ) 
    } 
} 

私はこのエラーを取得し続ける：バベルに関連する「非反復可能なインスタンスをdestructureする無効な試みを」。

マイバベル関連の依存関係：

"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

あなたは間違った方法でマップ機能にアクセスします。

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

array.map array.mapためのDOC（（値、指数）=> {}）。

Answer 2

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> 
)