React Native之ScrollView控件详解

本文详细介绍了React Native中的ScrollView控件,包括其在Android和iOS原生开发中的应用,以及在RN中使用时的注意事项。文章讨论了ScrollView的属性,如contentContainerStyle、horizontal、keyboardDismissMode等,并提供了代码示例,展示了如何利用ScrollView实现滚动视图功能。
摘要由CSDN通过智能技术生成

概述

ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,使用ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。
所以,要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误。
ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者。

属性

1:contentContainerStyle StyleSheetPropType(ViewStylePropTypes)

这些样式会应用到一个内层的内容容器上,所有的子视图都会包裹在内容容器内。例子:

return (
    <ScrollView contentContainerStyle={styles.contentContainer}>
    </ScrollView>
  );
  ...
  var styles = StyleSheet.create({
    contentContainer: {
      paddingVertical: 20
   
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiangzhihong8

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值