在按钮单击时反应本机水平滚动 [英] react native Horizontal Scroll on Button click

问题描述

我是 React Native 的初学者.正如您从 图像 中看到的，我有一个滚动视图和两个按钮.我已经成功实现了滚动视图，它工作正常，但我也希望他们在按下按钮时自动滚动.我尝试了很多搜索，但没有得到任何有效的东西.因此，任何帮助表示赞赏.请在下面找到我的代码.

I am a beginner at React Native. As you can see from the image that I have a Scroll View and two buttons. I have successfully implemented the scroll View which works fine but I also want to them to auto scroll on the press of a button. I have tried searching a lot but not getting anything which is working. So any help is appreciated. Please find my code below.

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

推荐答案

我不能保证这是最好的方法，因为我没有使用 React Native 进行过很多工作.

I cant gurantee this is the best approach as I havent worked alot with React Native.

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

Add this.scroll.scrollTo({ x: calculatedStartPositionOfTheScreen}) to your button Press handler 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

For this use case in bigger projects you can also consider https://reactnavigation.org

这篇关于在按钮单击时反应本机水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！