React Native 按钮点击水平滚动

Question

我是React Native的初学者。如您所见在图片中，我有一个滚动视图和两个按钮。我已经成功实现了滚动视图，它运行良好，但我还想让它们在按下按钮时自动滚动。我已经尝试搜索很多内容，但没有找到有效的解决方案。因此，任何帮助都将不胜感激。请查看我的代码如下。

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

var screenWidth = Dimensions.get('window').width;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.MainContainer}>
        <View style={styles.ButtonViewContainer}>
          <View style={styles.ButtonContainer}>
            <Button title="Screen 1" />
          </View>
          <View style={styles.ButtonContainer}>
            <Button title="Screen 2" />
          </View>
        </View>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
        >
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>
              Screen 1
              </Text>
          </View>
          <View style={styles.ScrollContainer}>
            <Text style={styles.ScrollTextContainer}>
              Screen 2
              </Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    backgroundColor: '#abe3a8',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'

  },
  ScrollContainer: {
    backgroundColor: '#cdf1ec',
    flexGrow: 1,
    marginTop: 0,
    width: screenWidth,
    justifyContent: 'center',
    alignItems: 'center'
  },
  ScrollTextContainer: {
    fontSize: 20,
    padding: 15,
    color: '#000',
    textAlign: 'center'
  },
  ButtonViewContainer: {
    flexDirection: 'row',
    paddingTop: 35,
  },
  ButtonContainer: {
    padding: 30,
  },
});

- Biks

---

找不到你所引用的按钮的任何点击函数？你想要在哪里自动滚动？ - Aravind S

现在滚动功能正常，但我还有两个按钮，当点击时应自动滚动到相应的屏幕。（请查看图片 https://i.stack.imgur.com/HFnuQ.png） - Biks

Answer 1

我不能保证这是最佳方法，因为我没有在React Native上进行过太多工作。

在您的按钮按下处理程序中添加 this.scroll.scrollTo({ x: calculatedStartPositionOfTheScreen}) https://facebook.github.io/react-native/docs/scrollview#scrollto

例如：

<View>
    ...
    <View style={styles.ButtonContainer}>
        <Button title="Screen 1" onPress={() => { this.scroll.scrollTo({ x: 0 }) }} />
    </View>
    <View style={styles.ButtonContainer}>
        <Button title="Screen 2" onPress={() => { this.scroll.scrollTo({ x: screenWidth }) }} />
    </View>
    <View style={styles.ButtonContainer}>
        <Button title="Screen 3" onPress={() => { this.scroll.scrollTo({ x: screenWidth * 2 }) }} />
    </View>
    ...
    <ScrollView
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        ref={(node) => this.scroll = node}
    >
    ...
    </ScrollView>
</View >

对于更大的项目中的这种使用情况，您也可以考虑https://reactnavigation.org

- Uyiosa Enabulele

---

这真让人惊讶，也许存在一些根本性的问题。我在这里运行它，它适用于Android和IOS。我修改了你的代码并添加了onPress方法。https://snack.expo.io/r1r_8MJHQ - Uyiosa Enabulele

谢谢。我建立了一个新项目并尝试了一下，它可以工作。我猜以前的项目可能有些问题。 - Biks

Answer 2

试一试。

<View>
    ...
    <View style={styles.ButtonContainer}>
        <Button title="Screen 1" onPress={() => { this.refs.scroll.scrollTo({ x: 0 }) }} />
    </View>
    <View style={styles.ButtonContainer}>
        <Button title="Screen 2" onPress={() => { this.refs.scroll.scrollTo({ x: screenWidth }) }} />
    </View>
    <View style={styles.ButtonContainer}>
        <Button title="Screen 3" onPress={() => { this.refs.scroll.scrollTo({ x: screenWidth * 2 }) }} />
    </View>
    ...
    <ScrollView
        horizontal={true}
        pagingEnabled={true}
        showsHorizontalScrollIndicator={false}
        ref={'scroll'}
    >
    ...
    </ScrollView>
</View >

- Yasin Ugurlu

Answer 3

你可以尝试：

onPress = (index) => {
   this.scroll.scrollTo({x: index * screenWidth, y: 0, animated: true})
}

 <Button title="Screen 1" 
    onPress = {() => this.onPress(0)}
 />
 ...
  <Button title="Screen 2" 
    onPress = {() => this.onPress(1)}
 />
 ...
 <ScrollView
      horizontal={true}
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      ref = {re => this.scroll = re}
 >
 </ScrollView>

- KienLV

---

我按照你的指南操作，但是当我点击按钮时出现了错误 -- undefined不是一个函数（在执行'_this2.scroll.ScrollToIndex({index:1,animated:true})'时） - Biks

仍然错误...未定义的函数..请检查图片 https://imgur.com/a/06jcRNV - Biks

改用以下代码：this.scroll.scrollTo({x: index * screenWidth, y: 0, animated: true}) - KienLV