Swiper 未显示正确数量的页面答案

【问题标题】：Swiper not displaying the right amount of pagesSwiper 未显示正确数量的页面
【发布时间】：2017-07-26 05:32:00
【问题描述】：

swiper 组件未显示正确的页数。在下面的示例中，总共应该有 4 页，但我只看到 2。

第一页有t1和t2。

第二页有t3和t4。

我正在使用“react-native-swiper”v1.5.4

render() {
        let testItems = [];
        testItems.push(<Text>t1</Text>)
        testItems.push(<Text>t2</Text>)
        let testItems2 = [];
        testItems2.push(<Text>t3</Text>)
        testItems2.push(<Text>t4</Text>)
        return(
        <ContainerView disableBackgroundButton={true}>
            <Swiper
                loop={false}
                showsPagination={true}
                height={Global.constants.HEIGHT * 0.9}>
                {testItems}
                {testItems2}
            </Swiper>
        </ContainerView>)
    }

【问题讨论】：

你是使用库还是包来制作 Swiper ？我能知道你用什么吗？
我在问题中添加了它

标签： javascript react-native swiper

【解决方案1】：

我有 2 个解决方案给你，它可以帮助你，第一个如果你希望你的数组看起来像那样（你的代码）那么你可以试试这个代码：

render() {
   let testItems = [];
   testItems.push(<Text>t1</Text>)
   testItems.push(<Text>t2</Text>)
   let testItems2 = [];
   testItems2.push(<Text>t3</Text>)
   testItems2.push(<Text>t4</Text>)
   return (
       <Swiper loop={false}
        showsPagination={true}>
           <View>
             {testItems.map((value, index) => {
               return(
                 <View key={index}>
                   {value}
                 </View>
               )})}
           </View>
           <View>
             {testItems2.map((value, index) => {
               return(
                 <View key={index}>
                   {value}
                 </View>
               )})}
           </View>
       </Swiper>
     );
  }

如果你想要一些动态数据，你可以改变你的数组是这样的：

let testItems = [
   {
     "text" : "t1",
     "text2" : "t2"
   },
   {
     "text" : "t3",
     "text2" : "t4"
   }
];

这是针对render 方法的：

render() {
   let testItems = [
      {
         "text" : "t1",
         "text2" : "t2"
      },
      {
         "text" : "t3",
         "text2" : "t4"
      }
   ];
   return (
      <Swiper loop={false}
       showsPagination={true}>
          {testItems.map((value, index) => {
            return(
               <View key={index}>
                  <Text>{value.text}</Text>
                  <Text>{value.text2}</Text>
               </View>
            )})}
      </Swiper>
   );
}

我希望这可以解决您的问题，如果您有错误，请告诉我，谢谢:)

【讨论】：