Question

我有以下编号的页面，当用户在页面上时，初始分页号必须是用户当前的页码。我用过

    <ScrollView ref={(view) => this._scrollView = view}>
    <View style={somestyle}><Text>1</Text></View>
    <View style={somestyle}><Text>2</Text></View>
     .
     .
     .
     .
    <View style={somestyle}><Text>9</Text></View>
    </ScrollView>
:
:
    this.refs._scrollView.scrollTo({x: 5, y: 0, animated: true})

（第5页），但没有用。第二个问题是如何在scrollview中添加向左<和向右>箭头

Answer 1

在这里，我为您创建了一个示例，说明如何向ScrollView添加带有箭头的分页，可以对其进行简化和修改。

我没有添加箭头，但是为了简化起见，我改用这样的文字 <Text> Left Arrow </Text>。您可以使用Icon或Image而不是Text添加箭头。

关于您的问题：

初始分页号必须是用户当前的页码

您可以通过使用xOffset中设置的this.state.currentXOffset并在<ScrollView onScroll={this._handleScroll} >函数中进行设置来获取当前的_handleScroll。如果愿意，可以在此为当前页码做条件。

下面的完整代码，您可以复制和粘贴该组件，因为它只能处理分页，然后修改所需的内容。

import React, { Component } from 'react';
import {View, Text, StyleSheet, ScrollView, TouchableHighlight} from 'react-native';    

export default class ForTest extends Component {
  constructor(props){
    super(props);
    this.state = {
      scrollViewWidth:0,
      currentXOffset:0
    }
  }

  _handleScroll = (event) => {
    console.log('currentXOffset =', event.nativeEvent.contentOffset.x);
    newXOffset = event.nativeEvent.contentOffset.x
    this.setState({currentXOffset:newXOffset})
  }

  leftArrow = () => {
    eachItemOffset = this.state.scrollViewWidth / 10; // Divide by 10 because I have 10 <View> items
    _currentXOffset =  this.state.currentXOffset - eachItemOffset;
    this.refs.scrollView.scrollTo({x: _currentXOffset, y: 0, animated: true})
  }

  rightArrow = () => {
    eachItemOffset = this.state.scrollViewWidth / 10; // Divide by 10 because I have 10 <View> items 
    _currentXOffset =  this.state.currentXOffset + eachItemOffset;
    this.refs.scrollView.scrollTo({x: _currentXOffset, y: 0, animated: true})
  }

  render() {
    //console.log('scrollViewWidth = ', this.state.scrollViewWidth)
    return (
      <View>
        <Text>Page Works!</Text>

        <View style={{flex:1, flexDirection:'row', justifyContent:'center'}}>

          <TouchableHighlight
            style={{alignItems: 'flex-start', paddingTop:20}}
            onPress={this.leftArrow}>
            <Text> Left Arrow </Text>
          </TouchableHighlight>

          <ScrollView 
            contentContainerStyle={{backgroundColor:'yellow', alignItems: 'center'}}
            horizontal={true}
            pagingEnabled={true}
            ref="scrollView"
            onContentSizeChange={(w, h) => this.setState({scrollViewWidth:w})}
            scrollEventThrottle={16}
            scrollEnabled={false} // remove if you want user to swipe
            onScroll={this._handleScroll}
          >
            <View style={styles.somestyle}><Text>1</Text></View>
            <View style={styles.somestyle}><Text>2</Text></View>
            <View style={styles.somestyle}><Text>3</Text></View>
            <View style={styles.somestyle}><Text>4</Text></View>
            <View style={styles.somestyle}><Text>5</Text></View>
            <View style={styles.somestyle}><Text>6</Text></View>
            <View style={styles.somestyle}><Text>7</Text></View>
            <View style={styles.somestyle}><Text>8</Text></View>
            <View style={styles.somestyle}><Text>9</Text></View>
            <View style={styles.somestyle}><Text>10</Text></View>
          </ScrollView>

          <TouchableHighlight
            style={{alignItems: 'flex-end', paddingTop:20}}
            onPress={this.rightArrow}>
            <Text> Right Arrow </Text>
          </TouchableHighlight>

        </View>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  somestyle: {
    paddingVertical:10,
    paddingHorizontal:20,
    margin:10,
    borderWidth:1,
    borderRadius:1,
    borderColor:'black'
  }
})

我希望这会有所帮助。

注意：我不太确定这是应用于应用程序的内容。我认为您正在寻找使用类似FlatLists（继承自VirtualizedList）之类的东西来代替ScrollViews。 VirtualizedList具有scrollToIndex函数，它的感知能力要强得多。而ScrollView的scrollTo期望使用x和y参数，这意味着您将必须计算要滚动到的确切位置-我在上面的代码示例中已经显示了此内容（其填充样式更加复杂）。

滚动到某个位置，然后在“响应本机”中设置左右箭头

1 个答案: