ScrollView 的永久可见滚动条(React Native) [英] Permanently visible Scroll Bar for ScrollView (React Native)

查看:103
本文介绍了ScrollView 的永久可见滚动条(React Native)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I just found that there is no permanent Scroll bar for ScrollView. I went through all the documentation and google but I don't think it actually exists.

我们如何为 实现永久滚动条?我们如何保持滚动条可见?

How do we implement permanent Scroll Bar for <ScrollView>? How do we keep Scroll Bar visible?

推荐答案

上有滚动条可用...

There is scroll bar is available on <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'
   }
})

只需使用 import ScrollView

just use import ScrollView

这篇关于ScrollView 的永久可见滚动条(React Native)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆