横向滑动第一次滑动的时候是预加载不行。 about react-scroll-paged-view HOT 13 CLOSED

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

from react-scroll-paged-view.

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

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

from react-scroll-paged-view.

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

from react-scroll-paged-view.

已经添加了， <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}]}
/>
)
})}

from react-scroll-paged-view.

from react-scroll-paged-view.

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

from react-scroll-paged-view.

我上图

from react-scroll-paged-view.

@TaumuLu

from react-scroll-paged-view.

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

from react-scroll-paged-view.

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

from react-scroll-paged-view.

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)',
},
})

from react-scroll-paged-view.

代码已经附上了。

from react-scroll-paged-view.

@MichaelHao25 已修复， 安装最新版本[email protected]

from react-scroll-paged-view.