ScrollView에 대해 영구적으로 표시되는 스크롤 막대(Native React Native)

ScrollView에 대해 영구적으로 표시되는 스크롤 막대(Native React Native)

ScrollView에 대한 영구 스크롤 바가 없다는 것을 방금 알았다.나는 모든 서류와 구글을 검토했지만 나는 그것이 실제로 존재한다고 생각하지 않는다.

다음에 대해 영구 스크롤 막대를 구현하는 방법<ScrollView>스크롤 막대를 어떻게 계속 볼 수 있을까?

ScrollView라는 소품을 가지고 있다.persistentScrollbar.

부울을 다음으로 설정할 수 있다.true덧셈으로써persistentScrollbar={true}스크롤 막대를 사용하지 않을 때에도 영구적으로 볼 수 있도록 한다.

이것은 안드로이드에서만 작동한다.

원주민의 공식 문서 대응

사용자가 스크롤이 iOS용 솔루션(AnterestinationScrollbar={true}만 있으면 Android용)에 있다는 것을 알려면 로드 후 몇 초 동안 스크롤 막대 표시기를 플래시로 설정하는 것이다.

표시기가 깜박이기 전에 사용자가 페이지를 넘겨받는 시간을 갖기를 좋아하기 때문에 로드 후 0.5초 후에 플래시로 설정했다(플래시 길이는 Apple에 의해 사전 설정되지만 2초 이상 경과하면 사용자가 플래시가 존재한다는 것을 알 수 있을 정도로 충분히 감소함).

export type ScrollViewRef = ScrollView & {
    flashScrollIndicators: () => void;
};

const My Page: React.FC<IProps> = (props) => {

    const scrollViewRef = React.useRef<ScrollViewRef | null>(null);

    useEffect(() => {
        setTimeout(function () {
            scrollViewRef.current?.flashScrollIndicators();
        }, 500);
    }, []);

    <ScrollView persistentScrollbar={true} ref={scrollViewRef}>
          my content that needs scrolling
   </ScollView>

간단하다.

<ScrollView showsVerticalScrollIndicator={true} persistentScrollbar={true}></ScrollView>

설정할 수 있다showsHorizontalScrollIndicator={true}또는showsVerticalScrollIndicator={true}스크롤하지 않더라도 스크롤 표시기가 보이도록 설정하십시오.

사용법:-

render(){
    return(
        <View>
            <ScrollView showsVerticalScrollIndicator={true}>
               ...
            </ScrollView>
        </View>
    );
}

다음 위치에서 스크롤 막대를 사용할 수 있음<scrollview>...

여기 암호가 있다...

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

class ScrollViewExample extends Component {
   state = {
      names: [
         {'name': 'Ben', 'id': 1},
         {'name': 'Susan', 'id': 2},
         {'name': 'Robert', 'id': 3},
         {'name': 'Mary', 'id': 4},
         {'name': 'Daniel', 'id': 5},
         {'name': 'Laura', 'id': 6},
         {'name': 'John', 'id': 7},
         {'name': 'Debra', 'id': 8},
         {'name': 'Aron', 'id': 9},
         {'name': 'Ann', 'id': 10},
         {'name': 'Steve', 'id': 11},
         {'name': 'Olivia', 'id': 12}
      ]
   }
   render() {
      return (
         <View>
            <ScrollView>
               {
                  this.state.names.map((item, index) => (
                     <View key = {item.id} style = {styles.item}>
                        <Text>{item.name}</Text>
                     </View>
                  ))
               }
            </ScrollView>
         </View>
      )
   }
}
export default ScrollViewExample

const styles = StyleSheet.create ({
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      backgroundColor: '#d2f7f1'
   }
})

가져오기 ScrollView 사용

참조URL: https://stackoverflow.com/questions/47038519/permanently-visible-scroll-bar-for-scrollview-react-native