2017-07-26 8 views
0

スワイパーコンポーネントに正しいページ数が表示されません。下の例では合計4ページありますが、私は2しか表示されません。スワイパーに適切なページ数が表示されない

最初のページはt1とt2未満です。

第2ページには、t3とt4があります。

が、私はそれはあなたを助けることができること、私はあなたのための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(
     <ContainerView disableBackgroundButton={true}> 
      <Swiper 
       loop={false} 
       showsPagination={true} 
       height={Global.constants.HEIGHT * 0.9}> 
       {testItems} 
       {testItems2} 
      </Swiper> 
     </ContainerView>) 
    } 
+1

あなたはSwiperを作るためのライブラリやパッケージを使うのですか?あなたは何を使うのか分かりますか? –

+0

質問に追加しました – BiggerD

答えて

2

v1.5.4「に反応ネイティブ-swiper」を使用しています、最初のものは、あなたがしたい場合は、あなたの配列は、(そのように見えるあなたのこのようになり

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

とあなたは、動的データのようsomethinkしたい場合、あなたはあなたの配列を変更することができます:コード)あなたはこのコードを試すことができ

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

これはrender方法は次のとおりです。私は、これはあなたがエラーを持っているなら、私に知らせて、あなたの問題をaswerことを願って

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

、感謝:)

+0

これは効いていますか? –

関連する問題