javascript - 滑动器未显示正确数量的页面

Question

滑动组件未显示正确的页数。在下面的示例中，总共应该有 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>)
    }

Answer 1

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

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

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