Swiper僅加載第一頁

Question

React native只能正確加載第一頁。這些項目來自一個數組。用作品填充數組，但從自定義組件加載不。該問題僅在呈現另一個自定義組件時發生。

//Main page render 
render() { 
    return (
     <ContainerView disableBackgroundButton={true} onLayout={this._onLayoutDidChange}> 
      <Image 
       source={require('../../img/barbershop_request.png')} 
       style={styles.backgroundImage}> 
       <View style={styles.overlay}></View> 
      </Image> 
      <ScrollView 
       ref="scrollView" 
       showsVerticalScrollIndicator={false}> 
       <Swiper 
        loop={false} 
        showsPagination={false} 
        height={Global.constants.HEIGHT * 1.34}> 
        {this.createBarberItems()} 
       </Swiper> 
      </ScrollView> 
     </ContainerView> 
    ) 
} 

createBarberItems() { 
    ... 
    for (index in barbers) { 
     ... 
     let barberItem = <BarberItemView /> 
     barberItems.push(barberItem) 
    } 

    // this works fine 
    // let testItems = []; 
    // testItems.push(<Text> here1</Text>) 
    // testItems.push(<Text>here2</Text>) 
    //return testItems; 
    return barberItems; 
} 

//BarberItemView Render 
render() { 
    return (
      <Text>Barber Item View</Text> 
    ) 
} 

Answer 1

嘗試環繞你BarberItemView與View組件

render() { 
return (
    <View> 
     <Text>Barber Item View</Text> 
    <View> 
) 
} 

不要忘了從反應-本地庫導入View組件在BarberItemView

import React from 'react'; 
import {Text, 
    View } from 'react-native'; 

這是我主要的應用程序.js看起來像

import React, { Component } from 'react'; 
import { 
StyleSheet, 
Text, 
View, 
ScrollView 
} from 'react-native'; 
import BarberItemView from './BarberItemView'; 
import Swiper from 'react-native-swiper'; 

export default class ReactSwiper extends Component { 
render() { 
    return (
     // you can replace this view component with your own custom component 
     <View style={{ 
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center', 
      backgroundColor: '#9DD6EB' 
     }}> 
      {/* <Image 
      source={require('./barbershop_request.png')} 
      style={styles.backgroundImage}> 
      <View style={styles.overlay}></View> 
     </Image> */} 

      <ScrollView 
       ref="scrollView" 
       showsVerticalScrollIndicator={true}> 
       <Swiper 
        loop={true} 
        showsPagination={true}> 
        {this.createBarberItems()} 
       </Swiper> 
      </ScrollView> 
     </View> 
    ) 
} 

createBarberItems() { 
    //since i don't know how your data looks like, i just use some dummy 
    let barbers = [1, 2, 3, 4, 5]; // your barber array 
    let barberItems = []; // your barber items 
    for (index in barbers) { 
     let barberItem = <BarberItemView /> 
     barberItems.push(barberItem) 
    } 

    return barberItems; 

    // this works fine 
    // let testItems = []; 
    // testItems.push(<Text> here1</Text>) 
    // testItems.push(<Text>here2</Text>) 
    // return testItems; 
} 


}