非常教程

React native参考手册

Components: ScrollView

ScrollView

包装平台ScrollView,同时提供与触摸锁定“响应者”系统集成的组件。

请记住,ScrollViews必须具有有限的高度才能工作,因为它们将无限高度的子元素包含到有界的容器中(通过滚动交互)。为了限制ScrollView的高度,可以直接设置视图的高度(不鼓励)或确保所有父视图的高度都是有界的。忘记传递{flex: 1}视图堆栈可能会导致错误,元素检查器可以很容易地进行调试。

尚不支持其他包含的响应者阻止此滚动视图成为响应者。

<ScrollView>vs <FlatList>- 使用哪一个?

ScrollView只需一次呈现所有反应的子组件。这使得它很容易理解和使用。

另一方面,这有一个性能下降。想象一下,你有一个很长的项目列表要显示,可能是几个屏幕价值的内容。一次创建所有内容的JS组件和本地视图,其中大部分甚至可能不会显示,这将导致渲染速度变慢并增加内存使用量。

这是FlatList发挥作用的地方。FlatList只是在他们即将出现时才会懒散地呈现项目,并移除在屏幕之外滚动的项目以节省内存和处理时间。

FlatList 如果您想在您的项目之间呈现分隔符,多列,无限滚动加载或其支持的任何其他功能,也非常方便。

Props

ViewPropTypes props...

contentContainerStyle?: StyleSheetPropType(ViewStylePropTypes)

这些样式将应用于包装所有子视图的滚动视图内容容器。例:

return (
  <ScrollView contentContainerStyle={styles.contentContainer}>
  </ScrollView>
);
...
const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20
  }
});

horizontal?: bool

如果为true,则滚动视图的子项将在一行中水平排列,而不是在列中垂直排列。默认值是false。

keyboardDismissMode?: enum('none', 'on-drag', 'interactive')

确定键盘是否因拖动而被解散。

跨平台

  • 'none' (the default), drags do not dismiss the keyboard.
  • 'on-drag', the keyboard is dismissed when a drag begins.

仅限iOS

  • 'interactive',键盘与拖动交互式消除并与触摸同步移动; 向上拖动取消解雇。在Android上,这不受支持,它与'none'具有相同的行为.keyboardShouldPersistTaps ?: enum('always', 'never', 'handled', false, true)确定键盘在点击后应该保持可见状态。
  • 'never'(默认设置),当键盘处于关闭状态时,轻敲焦点文本输入的外部将关闭键盘。发生这种情况时,儿童不会收到水龙头。
  • 'always',键盘不会自动关闭,并且滚动视图不会捕捉水龙头,但滚动视图的子项可以捕捉水龙头。
  • 'handled',当水龙头由儿童处理时(或由祖先捕获),键盘不会自动消除。
  • false,不推荐使用,而是使用'never'
  • true,不推荐使用,而是使用“always”

onContentSizeChange?: function

ScrollView的可滚动内容视图更改时调用。

Handler函数传递的内容宽度和内容高度作为参数: (contentWidth, contentHeight)

它使用连接到此ScrollView呈现的内容容器的onLayout处理程序来实现。

onMomentumScrollBegin?: function

当动量滚动开始时滚动(当滚动视图滑动到停止时发生滚动)。

onMomentumScrollEnd?: function

当动量滚动结束时调用(当滚动视图滑动到停止时发生滚动)。

onScroll?: function

滚动期间每帧最多触发一次。事件的频率可以使用scrollEventThrottle道具来控制。

pagingEnabled?: bool

如果为true,则滚动视图在滚动时停止滚动视图大小的倍数。这可以用于水平分页。默认值是false。

Note: Vertical pagination is not supported on Android.

refreshControl?: element

一个RefreshControl组件,用于为ScrollView提供拉到刷新功能。只适用于垂直ScrollViews(horizontal道具必须false)。

请参阅RefreshControl。

removeClippedSubviews?: bool

实验:当为真时,屏幕外的子视图(其overflowhidden)将从其原始支持超级视图中移除。这可以提高长列表的滚动性能。默认值是true。

scrollEnabled?: bool

如果为false,则视图无法通过触摸交互进行滚动。默认值是true。

请注意,视图始终可以通过调用进行滚动scrollTo

showsHorizontalScrollIndicator?: bool

如果为true,则显示水平滚动指示符。默认值是true。

showsVerticalScrollIndicator?: bool

如果为true,则显示垂直滚动指示符。默认值是true。

stickyHeaderIndices?: [number]

一组儿童指标,用于确定在滚动时哪些儿童停靠在屏幕的顶部。例如,传递stickyHeaderIndices={[0]}将导致第一个孩子被固定到滚动视图的顶部。该属性不支持与horizontal={true}

style?: style

Layout Props...
Shadow Props...
Transforms...
backfaceVisibility enum('visible', 'hidden')
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number
androidelevation数字(仅限Android)使用Android的基础高程API设置视图的高程。这会为项目添加投影并影响重叠视图的z顺序。仅支持Android 5.0+,对早期版本无效。

androidendFillColor?: color

有时候scrollview会占用比内容填充更多的空间。当这种情况发生时,这个道具将用一种颜色填充剩余的滚动视图,以避免设置背景和创建不必要的透支。这是一般情况下不需要的高级优化。

androidoverScrollMode?: enum('auto', 'always', 'never')

用于覆盖overScroll模式的默认值。

可能的值:

  • 'auto' - 默认值,只有当内容足够大才能有意义滚动时,才允许用户过度滚动此视图。
  • 'always' - 始终允许用户过度滚动此视图。
  • 'never' - 绝不允许用户过度滚动此视图。

androidscrollPerfTag?: string

用于在此滚动视图上记录滚动性能的标签。将强制动态事件启用(请参阅sendMomentumEvents)。这并没有做任何事情,你需要实现一个自定义的本地FpsListener,它是有用的。

iosDEPRECATED_sendUpdatedChildFrames?: bool

如果为true,则ScrollView将在滚动事件中发出updateChildFrames数据,否则将不计算或发出子帧数据。这只是为了支持遗留问题,onLayout应该用来检索帧数据。默认值是false。

iosalwaysBounceHorizontal?: bool

如果为true,则即使内容小于滚动视图本身,滚动视图也会在到达结尾时进行水平反弹。默认值为true horizontal={true},否则为false。

iosalwaysBounceVertical?: bool

如果为true,那么即使内容小于滚动视图本身,滚动视图也会在到达结尾时垂直弹出。默认值在false时为false horizontal={true},否则为true。

iosautomaticallyAdjustContentInsets?: bool

控制iOS是否应自动调整置于导航栏或选项卡栏/工具栏后面的滚动视图的插入内容。默认值是true。

iosbounces?: bool

当为true时,如果内容大于沿滚动方向轴的滚动视图,则滚动视图在到达内容末尾时会弹起。如果为false,则即使alwaysBounce*道具为真,也会禁用所有弹跳。默认值是true。

iosbouncesZoom?: bool

如果设置为true,则手势可以使变焦超过最小/最大值,变焦将变为手势结束时的最小/最大值,否则变焦不会超出限制。

ioscanCancelContentTouches?: bool

如果为false,则一旦开始跟踪,如果触摸移动,则不会尝试拖动。默认值是true。

ioscenterContent?: bool

如果为true,则当内容小于滚动视图边界时,滚动视图自动将内容居中; 当内容大于滚动视图时,此属性不起作用。默认值是false。

ioscontentInset?: {top: number, left: number, bottom: number, right: number}

滚动视图内容从滚动视图的边缘插入的量。默认为{top: 0, left: 0, bottom: 0, right: 0}

ioscontentInsetAdjustmentBehavior?: enum('automatic', 'scrollableAxes', 'never', 'always')

此属性指定如何使用安全区域插入修改滚动视图的内容区域。该属性的默认值是“never”。适用于iOS 11及更高版本。

ioscontentOffset?: PointPropType

用于手动设置开始滚动偏移量。默认值是{x: 0, y: 0}

iosdecelerationRate?: enum('fast', 'normal'), number

一个浮点数,用于确定用户抬起手指后滚动视图的减速速度。你也可以使用字符串快捷键"normal"以及"fast"用于匹配其底层的iOS设置UIScrollViewDecelerationRateNormalUIScrollViewDecelerationRateFast分别。

  • 'normal': 0.998 (the default)
  • 'fast': 0.99

iosdirectionalLockEnabled?: bool

如果为true,则ScrollView将尝试在拖动时锁定为垂直或水平滚动。默认值是false。

iosindicatorStyle?: enum('default', 'black', 'white')

滚动指标的风格。

  • 'default' (the default), same as black.
  • 'black',滚动指示器是黑色的。这种风格在浅色背景下很好。
  • 'white',滚动指示器是白色的。这种风格在黑暗背景下很好。

iosmaximumZoomScale?: number

允许的最大缩放比例。默认值是1.0。

iosminimumZoomScale?: number

允许的最小缩放比例。默认值是1.0。

iospinchGestureEnabled?: bool

如果为true,则ScrollView允许使用捏手势来放大和缩小。默认值是true。

iosscrollEventThrottle?: number

这将控制滚动时滚动事件发生的频率(以毫秒为单位的时间间隔)。数字越小,跟踪滚动位置的代码的精度越高,但由于通过网桥发送的信息量会导致滚动性能问题。JS运行循环同步到屏幕刷新率时,您不会注意到1-16之间的值有所不同。如果您不需要精确的滚动位置跟踪,请将此值设置得较高以限制通过网桥发送的信息。默认值为零,这会导致每次滚动视图时滚动事件仅发送一次。

iosscrollIndicatorInsets?: {top: number, left: number, bottom: number, right: number}

滚动视图指示符从滚动视图边缘插入的量。这通常应该设置为与contentInset。的值相同的值。默认为{0, 0, 0, 0}

iosscrollsToTop?: bool

如果为true,则当点击状态栏时,滚动视图会滚动到顶部。默认值是true。

iossnapToAlignment?: enum('start', 'center', 'end')

snapToInterval被设置时,snapToAlignment将定义捕捉到滚动视图的关系。

  • 'start' (默认)将对齐左侧(水平)或顶部(垂直)
  • 'center' 将对齐中心的捕捉
  • 'end' 将对齐右侧(水平)或底部(垂直)

iossnapToInterval?: number

设置时,会导致滚动视图以值的倍数停止snapToInterval。这可以用于通过长度小于滚动视图的子项进行分页。通常与snapToAlignment和组合使用decelerationRate="fast"。覆盖较少配置的pagingEnabled道具。

ioszoomScale?: number

滚动视图内容的当前比例。默认值是1.0。

方法

scrollTo(y?: number, object, x?: number, animated?: boolean)

滚动到给定的x,y偏移量,立即或平滑动画。

例:

scrollTo({x: 0, y: 0, animated: true})

注意:奇怪的函数签名是由于历史原因,该函数也接受单独的参数作为options对象的替代。由于含糊不清(y之前的y)而不推荐使用,且不应使用。

scrollToEnd(options?: object)

如果这是一个垂直ScrollView滚动到底部。如果这是一个水平滚动视图向右滚动。

使用scrollToEnd({animated: true})平滑滚动动画,scrollToEnd({animated: false})即时滚动。如果没有选项通过,则animated默认为true。

scrollWithoutAnimationTo(y, x)

已弃用,请scrollTo改用。

flashScrollIndicators()

瞬间显示滚动指示器。

Components: ScrollView相关

React native

React Native 是一个 JavaScript 的框架,用来撰写实时的、可原生呈现 iOS 和 Android 的应用。

主页 https://facebook.github.io/react-native/
源码 https://github.com/facebook/react-native
发布版本 0.49

React native目录

1.开始 | Getting Started
2.指南 | Guides
3.APIs
4.组件:ActivityIndicator | Components: ActivityIndicator
5.组件:按钮 | Components: Button
6.组件:CheckBox | Components: CheckBox
7.组件:DatePickerIOS | Components: DatePickerIOS
8.组件:DrawerLayoutAndroid | Components: DrawerLayoutAndroid
9.组件:FlatList | Components: FlatList
10.组件:图像 | Components: Image
11.组件:KeyboardAvoidingView | Components: KeyboardAvoidingView
12.Components: ListView
13.Components: MaskedViewIOS
14.Components: Modal
15.Components: NavigatorIOS
16.Components: Picker
17.Components: PickerIOS
18.Components: ProgressBarAndroid
19.Components: ProgressViewIOS
20.Components: RefreshControl
21.Components: ScrollView
22.Components: SectionList
23.Components: SegmentedControlIOS
24.Components: Slider
25.Components: SnapshotViewIOS
26.Components: StatusBar
27.Components: Switch
28.Components: TabBarIOS
29.Components: TabBarIOS.Item
30.Components: Text
31.Components: TextInput
32.Components: ToolbarAndroid
33.Components: TouchableHighlight
34.Components: TouchableNativeFeedback
35.Components: TouchableOpacity
36.Components: TouchableWithoutFeedback
37.Components: View
38.Components: ViewPagerAndroid
39.Components: VirtualizedList
40.Components: WebView
41.创建 | Contributing
42.指南(Android) | Guides (Android)
43.指南(IOS) | Guides (iOS)
44.其他 | Miscellaneous