ScrollView的永久可见滚动条(React Native)

Question

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

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

Answer 1

ScrollView有一个名为persistentScrollbar.

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

这仅适用于 Android。

React Native 的官方文档

Answer 2

如果您只是想让用户知道滚动是否存在，那么 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>

Answer 3

有滚动条可用<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