首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >两个滚动视图之间有很大的空间,因为wrap - React Native

两个滚动视图之间有很大的空间,因为wrap - React Native
EN

Stack Overflow用户
提问于 2017-04-07 18:40:14
回答 1查看 2.2K关注 0票数 0

我正在创建不同的滚动视图,视图不正确。在ScrollView End和ScrollView Start之间有一个很长的空间,我不知道应该修改什么样式来避免这种情况。当滚动视图设置为换行时,会出现长空格!

有什么想法吗?

我正在创建类似这样的东西:

代码语言:javascript
运行
AI代码解释
复制
 <View>
<ScrollView
    contentContainerStyle={{
        flexDirection: "column",
        alignContent: "space-around"
    }}
    automaticallyAdjustContentInsets={false}
    contentInSet={{ bottom: 49 }}
    style={{ paddingBottom: 0, marginBottom: 0 }}
>
    <Text>Testing</Text>
    <ScrollView
        contentContainerStyle={globalStyles.COMMON_STYLES.scrollView}
        automaticallyAdjustContentInsets={false}
        contentInSet={{ bottom: 49 }}
        style={{ padding: 0, margin: 0 }}
    >
        <Text>ScrollView End</Text>
    </ScrollView>
    //Here is the problem!!! Lot of space in the IOS Simulator.
    <Text>ScrollView Start</Text>
    <ScrollView>
        <Text>Test</Text>
    </ScrollView>
</ScrollView>
</View>;

 globalStyles.COMMON_STYLES.scrollview
   scrollView: {
    flexDirection: 'row',
    flexWrap: 'wrap',
 } 

在下面的滚动视图中有一个很长的空格:

EN

回答 1

Stack Overflow用户

发布于 2017-12-07 08:42:50

尝试在ScrollView上使用此命令

代码语言:javascript
运行
AI代码解释
复制
automaticallyAdjustContentInsets = {false}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43285057

复制
相关文章
React native和原生之间的通信
RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: 1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript。 2)使用Promise来实现。 3)原生模块向JavaScript发送事件。 关于使用回调,这是最简单的一种通信,这里可以看看官网的实现,今天要讲的是滴三种由原生模块向JavaScript发送事件。 (1)首先,你需要定义一个发送事件的方法。如下所示: /*原生模块可以在没有被调用的情况下往JavaScript发送事
xiangzhihong
2018/02/05
4.8K1
React native和原生之间的通信
react-native手势和视图
react-native的手势操作,从而去看了关于View的许多文档,现在做个总结。 首先,还是要知道他的解释,看了文档的都知道,react-native的View,不论在什么平台上,他都对应一个平台的原生视图,无论他是UIView、div、还是android.view.View。 然后再是去看他的属性方法,这些属性方法就是今天的重头戏了。 一、onLayout function 当组件挂载或者变化的时候调用,内部有nativeEvent.layout属性,包含四个参数: x(距
IT架构圈
2018/05/31
1.2K0
React Native与OC之间通信那些事
React Native用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔接回调。 作者:IMWeb-朱灵子 http://imweb.io/topic/5812ab7be2017a3d1878b508 具体的接口调用实现方法如下所示: 将OC注册进来的模块取出,调用模块中的对应函数,且将参数传入 利用回调参数得到访问OC的函数,并得到其返回值 利用回调参数得到访问OC的函数,并
用户1097444
2022/06/29
1K0
React Native与OC之间通信那些事
React Native 与 OC 之间通信那些事儿
作者:朱灵子 React Native用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法
腾讯IVWEB团队
2017/05/02
2K0
React Native与OC之间通信那些事儿
React Native用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔
IMWeb前端团队
2017/12/29
1.5K0
React Native与OC之间通信那些事儿
React Native与OC之间通信那些事儿
React Native用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔接回调。
IMWeb前端团队
2019/12/05
1.2K0
移动跨平台框架ReactNative组件样式style【05】
我们知道,在 HTML 中可以通过标签的 style 属性定义样式,也可以通过 `` 标签来定义样式。
江一铭
2022/06/17
2.1K0
移动跨平台框架ReactNative组件样式style【05】
react native
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
sofu456
2019/12/10
1.7K0
react native
Qm之滚动视图
❝ScrollView(滚动视图)类似于Qt 5版本的ScrollView,它提供用户定义内容的滚动。兼容Qt4与Qt5版本。❞ 1. 演示 可实现轻弹和拖动的功能。 2. 例子 ScrollView { width: 640 height: 480 Image { source: "./qthub_com.png" } } 3. 使用场景 一般用在显示的内容尺寸大于实际显示的尺寸时使用。 图片显示器。 4. 源码 /** * Author: Qt君
Qt君
2023/03/17
4510
Qm之滚动视图
React Native学习笔记(三)—— 样式、布局与核心组件
React Native 有一个内置的命令行界面,你可以用它来生成一个新项目。您可以使用 Node.js 附带的 访问它,而无需全局安装任何内容。让我们创建一个名为“AwesomeProject”的新 React Native 项目:npx
张果
2023/04/12
14.4K0
React Native学习笔记(三)—— 样式、布局与核心组件
Airbnb 的 React Native 历程(四):React Native 落下帷幕
转载请注明出处。请前往 Tiga on Tech 查看原文以及更多有趣的技术文章。
Tiga
2022/10/12
1.8K0
iOS React Native 混合开发集成React Native
   有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。
星宇大前端
2019/01/15
2K0
React Native的state
前言 在React的世界里,界面是由一个个Component拼出来的。当我们需要渲染一个界面时,以<View>为父控件。<Text>或自定义的<CustomText>为子控件。我们通过重写Compenent的render方法,来实现控件的渲染。 那么,Compenent的render方法何时调用呢? AppRegistry.registerComponent调用时,会调用render方法。 就是state变化时,会调用render方法。 因此,当我们数据改变,需要重新调用render时,我们应该将数据存入s
Oceanlong
2018/07/03
8610
React Native布局详细指南
本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。 FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不
CrazyCodeBoy
2018/05/07
3.6K0
React Native布局详细指南
COS SDK有Flutter和React Native版本啦
对象存储COS简介 对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。 COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入,实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。腾讯云提供了直观的 Web 管理界面,同时遍布全国范围的 CDN 节点可以对文件下载进行加速。 导语 Flu
云存储
2023/05/18
8440
COS SDK有Flutter和React Native版本啦
React Native的props
前言 在React的世界里,界面是由一个个Component拼出来的。当我们需要渲染一个界面时,以<View>为父控件。<Text>或自定义的<CustomText>为子控件。在渲染时,我们一定希望对子控件传递一些参数。props就可以让我们在控件中,获取来自父控件的参数。 一个例子 现在我们尝试实现一个让字符串反转的<Text>。 import React, { Component } from 'react'; import { Text, } from 'react-native'; class
Oceanlong
2018/07/03
9830
【React Native】react-native-scrollable-tab-view
一张跟内容完全关系的图 介绍 一个带有TabBar和可切换页面的控件。 在Android中可以看成是ViewPager和TabLayout的结合。 实际效果的话,就下面这样了。 官方的动图 你可以选择直接上官方Github了解怎么使用,或者继续往下看我装逼。 添加到项目中 npm install react-native-scrollable-tab-view --save 使用 基本用法 用tabLabel指定Tab名称 render() { return ( <S
Gavin-ZYX
2018/05/18
2.7K0
React Native布局详细指南
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。
CrazyCodeBoy
2020/08/10
2.8K0
【React-Native】React-Native组件样式合集
最近在阅读RN的文档,但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家。
啦啦啦321
2022/03/30
2.4K0
【React-Native】React-Native组件样式合集
React Native 的未来与React Hooks
近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、新版本的升级体验、还有新支持的 React Hook 等特性。
GSYTech
2019/04/21
3.9K0

相似问题

两个滚动视图之间有很大的空间,因为wrap - React Native

15

减少React Native视图之间的空间

120

React Native Scroll View -选择视图之间的空间时无法滚动

224

React Native Sync两个滚动视图

30

React Native Wrap Native API吗?

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文