使用数据数组来渲染 React Native swiper

问题描述

我正在使用 react-native-swiper 库。我想根据数组在 swiper 中加载图像。我尝试了以下代码。

matched:  [{'snap-id': 'snap1234','size': '20','snapname': 'abc'},{'snap-id': 'snp3234','size': '30','snapname': 'def'},{'snap-id': 'snap9993','size': '40','snapname': 'ght'}]
non-matched:  [{'snap-id': 'snap1222','size': 'NA','snapname': ' '},{'snap-id': 'snp3239',{'snap-id': 'snap9963','snapname': ' '}]

我尝试了上面的代码，但我得到了错误，即使我在 pages 函数中返回了一些东西。

  const Pages = () => {
    jsonMovies.map(movies => {
      console.log("test--" + movies.img);
      return (
        < View key={movies.uid} style={styles.slide1} >
          <Image
            style={styles.image}
            source={{ uri: movies.img }}
          />
        </View>
      )

    })
  }

 return (

    <Swiper 
    >    
      <Pages />

    </Swiper >


  )

如果我使用如下代码，则显示我的滑块图像。

Error: Pages(...): nothing was returned from render. This usually means a return statement is missing. Or,to render nothing,return null.

但问题是分页不起作用，有人能告诉使用 swiper 内部数组的正确方法吗，谢谢。

解决方法

试试这个：

const Pages = () => {
    return (
        <div>
            {jsonMovies.map(movies => {
                console.log("test--" + movies.img);
                return (
                    <View key={movies.uid} style={styles.slide1}>
                        <Image
                            style={styles.image}
                            source={{ uri: movies.img }}
                        />
                    </View>
                )
            })}
        </div>
    )
}