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

【问题标题】：Permanently visible Scroll Bar for ScrollView (React Native)ScrollView 的永久可见滚动条（React Native）
【发布时间】：2017-10-31 15:02:59
【问题描述】：

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

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

【问题讨论】：

标签： react-native

【解决方案1】：

ScrollView 有一个名为 persistentScrollbar 的道具。

您可以通过添加 persistentScrollbar={true} 将布尔值设置为 true 以使滚动条永久可见，即使它们不使用时也是如此。

这仅适用于 Android。

React Native's Official Documentation

【讨论】：

【解决方案2】：

很简单。

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

【讨论】：

【解决方案3】：

如果您只想让用户知道滚动条是否有适用于 iOS 的解决方案（对于 Android，您只需要persistentScrollbar={true}）...就是将滚动条指示器设置为闪烁几秒钟后正在加载。

我将它设置为加载后半秒闪烁，因为我希望用户在指示灯闪烁之前有时间进入页面（闪烁长度由 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>

【讨论】：

【解决方案4】：

您可以设置showsHorizontalScrollIndicator={true} 或showsVerticalScrollIndicator={true} 设置滚动指示器即使在不滚动时也可见。

用法：-

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

【讨论】：

至少在android中滚动条会在一段时间后消失。
showsHorizontalScrollIndicator 和 showsVerticalScrollIndicator 默认为 true。将它们设置为 false 可防止滚动时出现滚动条

【解决方案5】：

<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

【讨论】：

是的，但我们可以让它一直可见吗？
不，据我所知，您不能一直显示/可见 ScrollIndicator。它的ScrollView 默认行为，指示器仅在您滚动列表时可见（淡入），一旦滚动停止动画，则淡出。
你能把这个评论放在你的答案上吗？
是的，这个“答案”描述了如何使用 ScrollView，但没有回答原始问题。感谢 Pir 的澄清。