Question

我刚刚发现ScrollView没有永久滚动条。我浏览了所有文档和谷歌，但我不认为它确实存在。

我们如何为<ScrollView>实施永久滚动条？我们如何保持滚动条可见？

Answer 1

ScrollView有一个叫做persistentScrollbar的道具。

您可以通过添加true来使布尔值设置为persistentScrollbar={true}，以使滚动条永久可见，即使它们未被使用。

这仅适用于Android。

React Native's Official Documentation

Answer 2

如果您只想让用户知道滚动条是否有适用于 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 3

很简单。

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

Answer 4

<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

ScrollView的永久可见滚动条（React Native）

4 个答案: