横向滑动第一次滑动的时候是预加载不行。

[MichaelHao25]

[MichaelHao25]

看到没有后面的一屏幕是白色的。每次第一次加载都是这样的。

[TaumuLu]

看到没有后面的一屏幕是白色的。每次第一次加载都是这样的。

默认懒加载下一屏，但是在touchEnd的时候，有个参数isMovingRender控制在touchMove结束时加载下一页，你需要加上，我demo里的这行配置

[TaumuLu]

我想这里isMovingRender默认为true可能好点，但我更多的情况是需要它为false @MichaelHao25

[MichaelHao25]

已经添加了， <WrapView onChange={this._onChange} // onResponder={this._onResponder} // renderHeader={this._renderTabBar} // renderFooter={this._renderDot} // tabBarPosition='top' // hasAnimation={false} // initialPage={0} isMovingRender // vertical={false} // initialPage={1} infinite // locked // autoPlay

{/* <View style={[Style.pageView, { backgroundColor: 'black' }]}>

head page {0} foot

*/} {pageLists.map((val, ind) => { return ( <InsideScrollView key={ind} text={ind + 1} style={Style[pageItem_${ind % 3}]} /> ) })}

[MichaelHao25]

[MichaelHao25]

现在我动态添加pagelists的时候，拖拽的动画也没了

[MichaelHao25]

我上图

[MichaelHao25]

@TaumuLu

[MichaelHao25]

需求时用户打开这张页面，默认求情可能有十条数据，用户滑动到第九条的时候我就回去拉去下一页的数据

[MichaelHao25]

但是拉取的新数据就没有滑动的动画了。

[MichaelHao25]

import React, { Component } from 'react' import { StyleSheet, Platform, Text, Dimensions, NativeModules, View, ScrollView, TouchableOpacity } from 'react-native' import PropTypes from 'prop-types'

import ScrollPagedView, { ViewPaged } from 'react-scroll-paged-view' // import ScrollPagedView, { ViewPaged } from './../src'

let height = Dimensions.get('window').height const width = Dimensions.get('window').width

if (Platform.OS === 'android') { height -= NativeModules.StatusBarManager.HEIGHT }

export default class App extends Component {

constructor(props) { super(props); this.state = { pageLists: ['blue', 'green', 'red',],

}

} _onChange = (currentPage, prevPage) => { const { pageLists } = this.state console.log(currentPage, prevPage); let length = pageLists.length; if (currentPage + 1 == length) { this.setState(prevState => { let temp = prevState.pageLists; temp.push(currentPage); return { pageLists: temp, } } ) } } render() { const WrapView = ScrollPagedView // const WrapView = ViewPaged const { pageLists } = this.state console.log(pageLists);

return (
  <View style={Style.container}>
    <WrapView
      onChange={this._onChange}
      // onResponder={this._onResponder}
      // renderHeader={this._renderTabBar}
      // renderFooter={this._renderDot}
      // tabBarPosition='top'
      // hasAnimation={false}
      // initialPage={0}
      isMovingRender
    // vertical={false}
    // initialPage={1}
    infinite
    // locked
    // autoPlay
    >
      {/* <View style={[Style.pageView, { backgroundColor: 'black' }]}>
        <Text style={Style.text}>head</Text>
        <Text style={Style.textIndex}>page {0}</Text>
        <Text style={Style.text}>foot</Text>
      </View> */}
      {pageLists.map((val, ind) => {
        return (
          <InsideScrollView
            key={ind}
            text={ind + 1}
            style={Style[`pageItem_${ind % 3}`]}
          />
        )
      })}
    </WrapView>
  </View>
)

} }

class InsideScrollView extends Component { static contextTypes = { ScrollView: PropTypes.func, }

render() { const WrapView = this.context.ScrollView || ScrollView const { text, style } = this.props

return (
  <View style={{ flex: 1 }}>
    <WrapView style={{ flex: 1 }}>
      <View style={[Style.pageView, style]}>
        <Text>{text}</Text>
      </View>
    </WrapView>
  </View>
)

} }

const Style = StyleSheet.create({ container: { flex: 1, height, width, backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, },

pageView: { flex: 1, backgroundColor: '#F5FCFF', alignItems: 'center', paddingVertical: 20, justifyContent: 'space-between', }, text: { fontSize: 40, color: 'white', }, textIndex: { fontSize: 80, color: 'white', },

pageItem_0: { backgroundColor: 'blue', height: height, width, }, pageItem_1: { backgroundColor: 'green', height: height, width, }, pageItem_2: { backgroundColor: 'red', height, width, },

tabBarContainer: { minWidth: 50, minHeight: 50, backgroundColor: 'white', borderColor: '#000', flexDirection: 'row', }, tabBarItem: { flex: 1, justifyContent: 'center', alignItems: 'center', borderBottomWidth: 4, borderColor: 'transparent', }, tabBarItemText: { fontSize: 18, color: 'gray', },

dotContainer: { position: 'absolute', bottom: 80, left: 100, right: 100, height: 10, flexDirection: 'row', }, dotItemView: { height: 10, width: 10, borderRadius: 5, backgroundColor: 'rgba(0, 0, 0, 0.6)', }, })

[MichaelHao25]

代码已经附上了。

[TaumuLu]

@MichaelHao25 已修复， 安装最新版本react-scroll-paged-view@2.2.6