onPress按鈕滾動到功能組件中的特定部分

我正在嘗試撰寫一個代碼，我想在onPress按鈕上執行操作，以分配一個螢屏或部分，我的滾動條應該按照我的意愿去，下面的代碼是使用類組件完美編碼的，但我的整個代碼我編碼是在功能組件，我確實不知道如何將此類組件轉換為功能組件幫助。

應用程式.js

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

let scrollYPos = 0;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      screenHeight: Dimensions.get('window').height,
      screenWidth: Dimensions.get('window').width,
    };
  }

  scrollToB = () => {
    scrollYPos = this.state.screenHeight * 1;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
    console.log("test", scrollYPos)
  };
  scrollToC = () => {
    scrollYPos = this.state.screenHeight * 2;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
  };
  scrollToTop = () => {
    this.scroller.scrollTo({ x: 0, y: 0 });
  };

  render() {
    return (
      <ScrollView style={styles.container} ref={(scroller) => { this.scroller = scroller }}>
        <View style={[styles.screen, styles.screenA]}>
          <Button
            onPress={this.scrollToB}
            title="sctoll to B"
          />
          <Button
            title="sctoll to C"
            onPress={this.scrollToC}
          />
          <Button
            title="sctoll to Top"
            onPress={this.scrollToTop}
          />
          <Text style={styles.letter}>A</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to B</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenB]}>
          <Text style={styles.letter}>B</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to C</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenC]}>
          <Text style={styles.letter}>C</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to Top</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  screen: {
    backgroundColor: 'yellow',
    flexDirection: 'column',
    height: Dimensions.get('window').height,
    justifyContent: 'center'
  },
  screenA: {
    backgroundColor: '#F7CAC9',
  },
  screenB: {
    backgroundColor: '#92A8D1',
  },
  screenC: {
    backgroundColor: '#88B04B',
  },
});

uj5u.com熱心網友回復：

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

let scrollYPos = 0;

export const App = () => {
    const [screenHeight, setScreenHeight] = useState(Dimensions.get('window').height)
    const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width)

  const scrollToB = () => {
    scrollYPos = screenHeight * 1;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
    console.log("test", scrollYPos)
  };
  const scrollToC = () => {
    scrollYPos = screenHeight * 2;
    this.scroller.scrollTo({ x: 0, y: scrollYPos });
  };
  const scrollToTop = () => {
    this.scroller.scrollTo({ x: 0, y: 0 });
  };

    return (
      <ScrollView style={styles.container} ref={(scroller) => { this.scroller = scroller }}>
        <View style={[styles.screen, styles.screenA]}>
          <Button
            onPress={this.scrollToB}
            title="sctoll to B"
          />
          <Button
            title="sctoll to C"
            onPress={this.scrollToC}
          />
          <Button
            title="sctoll to Top"
            onPress={this.scrollToTop}
          />
          <Text style={styles.letter}>A</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to B</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenB]}>
          <Text style={styles.letter}>B</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to C</Text>
          </View>
        </View>
        <View style={[styles.screen, styles.screenC]}>
          <Text style={styles.letter}>C</Text>
          <View style={styles.scrollButton}>
            <Text style={styles.scrollButtonText}>Scroll to Top</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  screen: {
    backgroundColor: 'yellow',
    flexDirection: 'column',
    height: Dimensions.get('window').height,
    justifyContent: 'center'
  },
  screenA: {
    backgroundColor: '#F7CAC9',
  },
  screenB: {
    backgroundColor: '#92A8D1',
  },
  screenC: {
    backgroundColor: '#88B04B',
  },
});

希望這可以幫助

uj5u.com熱心網友回復：

您是否嘗試過簡單地使用 <a href ="idofthatView> ？我不熟悉 react native 但它應該可以作業

標籤：javascriptcss反应式反应功能组件

上一篇：defineProps<({})>()和defineProps({})語法的區別？

下一篇：為什么當鍵盤出現在本機反應時我的按鈕會上升？按鈕視圖位置是絕對的？