Постоянно видимая полоса прокрутки для ScrollView (React Native)

Question

Я только что обнаружил, что нет постоянной полосы прокрутки для ScrollView. Я просмотрел всю документацию и Google, но я не думаю, что она на самом деле существует.

Как мы реализуем постоянную полосу прокрутки для <ScrollView>? Как мы сохраняем полосу прокрутки видимой?

Answer 1

Есть полоса прокрутки доступна на <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

Answer 2

ScrollView есть реквизит под названием persistentScrollbar.

Вы можете установить логическое значение true добавляя persistentScrollbar={true} чтобы сделать полосы прокрутки постоянно видимыми, даже если они не используются.

Это работает только для Android.

Официальная документация React Native

Answer 3

Если вы просто хотите, чтобы пользователь знал, что прокрутка есть решение для iOS (persistentScrollbar={true} - это все, что вам нужно для Android)... это установить индикатор полосы прокрутки так, чтобы он мигал в течение пары секунд после загрузки.

Я установил его так, чтобы он мигал через полсекунды после загрузки, потому что мне нравится, когда у пользователя есть момент, чтобы просмотреть страницу, прежде чем индикатор начнет мигать (длина вспышки предустановлена ​​Apple, но она исчезает и гаснет в течение двух секунд, что более чем достаточно для пользователь, чтобы знать, что это там)

      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>

Answer 4

Это просто.

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

Answer 5

насколько я знаю, вы не можете постоянно показывать/видимый ScrollIndicator. Его поведение ScrollView по умолчанию, индикатор будет виден (появляется) только при прокрутке списка и исчезает после того, как прокрутка прекратила анимацию.

Answer 6

Вы можете установить showsHorizontalScrollIndicator={true} или же showsVerticalScrollIndicator={true} установить индикатор прокрутки видимым, даже если не прокручивать.

Использование:-

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