滚动到一个位置并在本机反应中设置左右箭头

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 页）但没有用。第二个问题是如何在滚动视图中添加左<和右>箭头

Answer 1

我在这里为您创建了一个示例，说明如何将带箭头的分页添加到 ScrollView，可以简化修改。

我没有添加箭头，但为了简单起见，我使用文字代替，如下所示 <Text> Left Arrow </Text>。您使用 Icon 或 Image 而不是 Text.

添加箭头

关于您的问题：

initial pagination number must be the user current page number

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

下面是完整的代码，你可以复制并粘贴组件，因为它只处理分页，然后修改你想要的。

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 参数，这意味着您必须计算要滚动到的确切位置——我在上面的代码示例中已经展示了这一点（填充样式更复杂）。

滚动到一个位置并在本机反应中设置左右箭头

Scroll to a position and set left & right arrow in react native

pagination

scrollview

reactjs

react-native