Question

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

第一页有t1，在t2下。

第二页有t3和t4。

我正在使用＆＃34; react-native-swiper＆＃34; 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>)
    }

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

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

Swiper无法显示正确数量的页面

1 个答案: