Swiper not displaying the right amount of pages

问题

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.

The first page has t1 and under t2.

The second page has t3 and t4.

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

回答1:

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"
   }
];

and this is for the render method :

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

来源：https://stackoverflow.com/questions/45318192/swiper-not-displaying-the-right-amount-of-pages

标签

javascript

react-native

swiper