javascript - 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

尝试用 View 组件包围 BarberItemView

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

不要忘记从BarberItemView中的react-native库导入View组件

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

这是我的主要 app.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;
}


}