Permanent sichtbare Scrollleiste für ScrollView (Native Reaction)

Question

Ich habe gerade festgestellt, dass es für ScrollView keine permanente Scrollleiste gibt. Ich habe die gesamte Dokumentation durchgesehen und googelt, aber ich glaube nicht, dass es tatsächlich existiert.

Wie implementieren wir permanente Scroll Bar für <ScrollView>? Wie halten wir den Scroll-Balken sichtbar?

Answer 1

Es gibt Bildlaufleiste auf <scrollview> vorhanden ist ...

hier ist der Code ...

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' 
    } 
}) 

nur Import Scroll verwenden

Answer 2

Sie können festlegen, showsHorizontalScrollIndicator={true} oder showsVerticalScrollIndicator={true} zu Stellen Sie den Scrollindikator auch dann ein, wenn Sie nicht scrollen.

Verbrauch: -

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