Swiper 未显示正确数量的页面 [英] Swiper not displaying the right amount of pages

问题描述

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

The swiper component doesn't show the right number of pages. In the example below there should be a total of 4 pages but I only see 2.

第一页有 t1 和在 t2 之下.

The first page has t1 and under t2.

第二页有 t3 和 t4.

The second page has t3 and t4.

我使用的是react-native-swiper"v1.5.4

I am using "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>)
    }

推荐答案

我有 2 个解决方案给你，也许它可以帮助你，第一个如果你想让你的数组看起来像那样(你的代码)那么你可以试试这个代码:

i have 2 solution for you,may it can help you, the first one if you want your array looks like that (your code) then you can try this code :

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

如果你想要一些类似动态数据的想法，你可以把你的数组改成这样:

and if you want somethink like dynamic data, you can change your array to be like this :

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

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

i hope this can aswer your problem, let me know if you have an error, thanks :)

这篇关于Swiper 未显示正确数量的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！