使用数据数组渲染 React native swiper

Question

我正在使用 react-native-swiper 库。我想在基于数组的滑动器中加载图像。我尝试了以下代码。

  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 >


  )

我尝试了上面的代码，但我得到了错误即使我 return 页面功能中的某些东西。

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

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

<Swiper>

{

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

  })

}

</Swiper >

但问题是分页不起作用，谁能告诉我在 swiper 中使用数组的正确方法，谢谢。

Answer 1

试试这个：

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

使用数据数组渲染 React native swiper

Use array of data to render React native swiper

reactjs

react-native

react-native-swiper