Question

在仔细阅读React Native Documentation之后，我似乎无法找到如何使<ScrollView>拥有一个不会淡出的持久滚动条。我将如何实现这一目标？

Answer 1

iOS

底层的iOS本机组件UIScrollView（技术上为RCTEnhancedScrollView）不支持保持滚动指示器可见。因此，围绕它的React Native包装器也不会。

有一个技巧可以使它与本机组件一起工作（一种方法，请参见this answer）。要在React Native中完成此操作，您需要在本机端实现此技巧，然后create your own Native Module或派生React Native并修改their ScrollView component。

也就是说，iOS Scroll View interface guidelines不鼓励这样做，因此您可能希望不考虑指标的行为。

Android

唯一已知的解决方法是设置<item name="android:overScrollMode">always</item>，但不鼓励这样做。

Answer 2

我一直在寻找解决方案，但没有找到任何答案，然后我创建了一个解决方案，希望可以为您提供帮助。我创建了一个具有高度和宽度的视图View，并将其放在滚动视图上，之后，我使用了诸如onMomentumScrollBegin，onMomentumScrollEnd，onContentSizeChange和onScroll等滚动视图的Props

之后，我使用布尔变量创建条件，如果该变量为false，则View是可见的，如果为false，则View为hide，如何激活此变量？ Prop onMomentumScrollBegin用于检测何时使用scrollView，并且使用与onMomentumScrollEnd一起将变量设置为false的相同方法来检测滚动何时结束。

Prop onContentSizeChange允许我获取滚动视图的高度和宽度，该值用于计算滚动条/ scrollIndicator的设置位置

最后通过Prop onScroll我得到了位置。

示例：

<ScrollView 
  onMomentumScrollBegin={() => {this.setvarScrollState()}}
  onMomentumScrollEnd={() => {this.setvarScrollStateRev()}}
  scrollEventThrottle={5} 
  onContentSizeChange={(w, h) => this.state.hScroll = h}
  showsVerticalScrollIndicator={false}
  onScroll={event => { this.state.wScroll = event.nativeEvent.contentOffset.y }}
  style={{ marginVertical: 15, marginHorizontal:15, width: this.state.measurements3.width}}>                    
   {
   Mydata.map((value, index) => {

   return <TouchableOpacity>
           <Text>{ value.MyDataItem }</Text>
          </TouchableOpacity>
       })
   }

功能：

setvarScrollState() {
    this.setState({VarScroll: true});
}

setvarScrollStateRev() {
    this.setState({VarScroll: false});
}

和变量

this.state = {VarScroll: false}

那我的状况是

!this.state.VarScroll ?
 <View
  style = {{
  marginTop: 200*(this.state.wScroll / this.state.hScroll),
  marginLeft:338.5,
  height: 35,
  width: 2,
  backgroundColor: 'grey',
  position:'absolute'
  }}
  /> 
 : null

为什么200？因为我的marginTop可以设置的最大值查看图片

最后的注释： scrollView必须位于具有另一个View的View内部（滚动条）像这样

<View>
    {/*---- ScrollBar and conditions----*/}
    <View>
    <View>
    <ScrollView>
    </ScrollView>
</View>

Answer 3

添加答案，因为以上都不适合我。

Android 现在拥有persistentScrollbar道具。

iOS 不支持此功能。因此，我创建了一个可以按如下方式使用的JS解决方案：

<SBScrollView persistentScrollbar={true}>...</SBScrollView>

基本上，此类在Android上将使用persistentScrollbar，而在iOS上将添加栏。目前尚不顺利，但可以正常工作。

import React, { Component } from "react";
import { Platform, View, ScrollView, TouchableOpacity } from "react-native";

class SBScrollView extends Component {
  state = { hScroll: 0, showScrollBar: false };

  componentWillMount() {
    if (this.props.persistentScrollbar) {
      this.setState({ showScrollBar: true });
    }
  }

  render() {
    const { persistentScrollbar, ...attributes } = this.props;

    if (Platform.OS == "android" || !persistentScrollbar) {
      // Abdroid supports the persistentScrollbar
      return (
        <ScrollView persistentScrollbar={persistentScrollbar} {...attributes}>
          {this.props.children}
        </ScrollView>
      );
    }

    const { hScroll, showScrollBar } = this.state;

    // iOS does not support persistentScrollbar, so
    // lets simulate it with a view.
    return (
      <ScrollView
        ref="scrollview"
        showsVerticalScrollIndicator={false}
        onScroll={event => {
          const ratio =
            event.nativeEvent.contentSize.height /
            event.nativeEvent.layoutMeasurement.height;
          let hScroll;
          if (ratio <= 1) {
            this.setState({ showScrollBar: false });
          } else {
            const hScroll = event.nativeEvent.contentOffset.y * ratio;
            this.setState({ hScroll, showScrollBar: true });
          }
        }}
        {...attributes}
      >
        {this.props.children}
        {showScrollBar && (
          <View
            style={{
              position: "absolute",
              top: hScroll,
              right: 3,
              backgroundColor: "#a6a6a6",
              height: 160,
              width: 2
            }}
          ></View>
        )}
      </ScrollView>
    );
  }
}

export default SBScrollView;

我希望这可以帮助其他人。

React Native <scrollview>持久滚动条

3 个答案:

iOS

Android