React Native ScrollView/FlatList 不滚动

2024-01-31

我有一个数据列表,我想将其放入 FlatList(即 ScrollView)中,每当我尝试向下滚动以查看列表的更多内容时,ScrollView 就会弹回到列表顶部,因此我永远看不到列表底部。

我正在使用 Expo,奇怪的是,如果我只是创建一个新项目或将一些代码复制/粘贴到 Snack 中,那么滚动就可以正常工作。仅在我当前的项目中,我无法滚动列表。我什至已经进入main.js文件并刚刚将我的示例代码粘贴到其中,问题仍然存在。

我的示例代码位于此处:https://snack.expo.io/ryDPtO5-b https://snack.expo.io/ryDPtO5-b我已将这段确切的代码粘贴到我的项目中,但它没有按预期工作。

版本: RN 0.44 / 世博SDK 17.0.0 / 反应:16.0.0-alpha.6

我的项目的实际用例包括将 FlatList 组件放置在屏幕的底部三分之一处以显示作业列表。这是我发现错误并开始尝试调试问题的地方。在我的项目中,我有一个父母View风格为{flex: 1和一个孩子List其中包含FlatList... List来自react-native-elements

EDIT

这是我实际尝试使用的代码:

 <View style={styles.container}>
<View style={containerStyles.headerContainerStyle}>
    <Text style={[textStyles.h2, { textAlign: "center" }]}>
        Territory: {this.props.currentTerritory}
    </Text>
</View>
<View style={styles.mapContainer}>
    <MapView
        provider="google"
        onRegionChangeComplete={this.onRegionChangeComplete}
        region={this.state.region}
        style={{ flex: 1 }}
    >
        {this.renderMapMarkers()}
    </MapView>
</View>
<Badge containerStyle={styles.badgeStyle}>
    <Text>Orders Remaining: {this.props.jobsList.length}</Text>
</Badge>
<List containerStyle={{ flex: 1 }}>
    <FlatList
        data={this.props.jobsList}
        keyExtractor={item => item.id}
        renderItem={this.renderJobs}
        removeClippedSubviews={false}
    />
  </List>
 </View>;

还有我所有的风格

const styles = StyleSheet.create({
container: {
    flex: 1,
},
mapContainer: {
    height: 300,
},
badgeStyle: {
    backgroundColor: 'green',
    alignSelf: 'center',
    marginTop: 15,
    width: 300,
    height: 35,
},
});

最后是我的 renderItem 函数:

 renderJobs = ({ item }) => {
const { fullAddress, pickupTime } = item;

return (
    <ListItem
        containerStyle={
            item.status === "active" && { backgroundColor: "#7fbf7f" }
        }
        title={fullAddress}
        titleStyle={{ fontSize: 14 }}
        subtitle={pickupTime}
        subtitleStyle={{ fontSize: 12, color: "black" }}
        onPress={() =>
            this.props.navigation.navigate("jobActions", { job: item })
        }
    />
);
};

我能够解决这个问题。

解决方案是使用 flatlist 组件<View style={{flex:1}}>renderRow 返回组件后<View style={{flex:1}}>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native ScrollView/FlatList 不滚动 的相关文章

随机推荐

  • hibernate 验证器 + jsf 2.0:UTF-8 格式的 ValidationMessages.properties

    我在以 UTF 8 格式显示 Hibernate Validator 的自定义 ValidationMessages 时遇到问题 对于常见的 jsf 消息 我遵循了以下建议 JSF 2 0 应用程序中具有 UTF 8 编码属性文件的 i18
  • 如何将 spring-boot WAR 部署到 Tomcat?

    在发布之前我已经花了很多时间在这上面 我有一个 spring boot 应用程序 可以作为 JAR 运行良好 但是当我尝试将其转换为 WAR 时 我无法部署它 我尝试寻找它的规则来决定Tomcat是嵌入式的还是外部的 WEB INF lib
  • 如何在QTextEdit中显示数学方程?

    有谁知道如何仅使用 Python 在以任何格式 TXT MathML MML LaTeX HTML XML 或任何格式 编写的 QTextEdit 中显示数学方程 即不使用像 Latex 本身这样的第 3 方包 我试图从 Qt 中找到 Ma
  • 为什么在一项测试中向量比地图更快,而在另一项测试中却不然?

    我一直被告知矢量速度很快 而在我多年的编程经验中 我从未见过任何东西可以缩短这一点 我决定 过早地优化并 编写一个关联类 它是一个围绕顺序容器的薄包装器 即 std vector并提供了相同的接口 std map 大部分代码都非常简单 我很
  • 在 Firebase 中执行多位置更新时如何使用事务?

    在我的 Firebase 数据库中 我需要同时对两个位置进行两次写入 我对这两个位置都有规则 以确保用户在不同时写入另一个位置的情况下无法在那里写入 对这些位置之一的写入需要递增 递减 当然 这必须通过事务来完成 否则我无法保证用户不会覆盖
  • 单击后禁用单选按钮

    我需要一些帮助 这是html div p match1 p teamA div
  • 抑制警告“类别正在实现一个方法,该方法也将由其主类实现”

    我想知道如何抑制警告 类别正在实现一种方法 该方法也将由 它的初级班 我有一个特定的代码类别 UIFont systemFontOfSize CGFloat fontSize return self aCustomFontOfSize fo
  • 从 C# 访问经过 SPNEGO 身份验证的 Web 服务

    我们有一个 Web 服务 通过 HTTP 提供数据并通过 SPNEGO 和单点登录 对用户进行身份验证 我们想为此 Web 服务编写一个 C 客户端 NET 中是否有任何标准 提供的方法来生成必要的令牌 广泛的谷歌搜索表明 SPNEGO 没
  • BUG:无法在 DatePicker 上选择浮动 VSTO 外接程序之外的日期

    我在这里记录了 Microsoft 的问题 Repro 可供下载 https connect microsoft com VisualStudio feedback details 741454 value change event doe
  • Laravel 5 记得我不工作

    我无法得到Laravel 记住账号功能来工作 我将记住令牌列添加到我的User型号表 我的User Model Authenticatable 用户模型不包含与 记住我 功能相关的任何其他特定内容 我正在使用默认的身份验证驱动程序和防护 M
  • Log4J2 属性替换 - 默认

    我只是想知道是否有任何方法可以为 LOG4J 中的属性替换提供默认值 我想在 java 系统属性中传递文件路径 然后将其与 env mySystemProperty 一起使用 但是如果开发者忘记设置这个属性怎么办 然后我想在 log4j2
  • 2.0.1 版本的速度滚动问题

    最新版本 Velocity 2 0 1 的更新会导致与滚动相关的问题 具体来说 会抛出以下错误消息 错误 速度 第一个参数 滚动 不是属性映射 已知操作或注册的重定向 正在流产 以下示例适用于 Velocity 1 5 https code
  • LOCK_NB在flock中是什么意思?

    什么是LOCK NBPHP 中的意思是flock命令 LOCK NB意味着非阻塞 通常当您尝试锁定文件时 您的 PHP 脚本执行将会停止 致电给flock then blocks它从恢复 它会一直这样做 直到删除所访问文件上的并发锁为止 大
  • 如何让 selenium-webdriver 忽略 Firefox 和 PhantomJS 中的 SSL 错误?

    考虑到这些节点依赖关系 chromedriver 2 24 1 cucumber 1 3 0 geckodriver 1 1 2 phantomjs prebuilt 2 1 12 selenium webdriver 3 0 0 beta
  • Eclipse 升级不工作

    我的 Eclipse 突然停止构建 Android 因此我删除了旧版本并安装了 Indigo 当我尝试导入 Android 项目时 出现以下错误 Errors occurred during the build Errors running
  • 为什么以 margin 0 auto 居中可以与 display:block 一起使用,但不能与 display:inline-block 一起使用?

    只是一个困扰我的问题 为什么以 margin 0 auto 确实可以很好地工作 display block 但当显示设置为时 div 不会居中 display inline block 感谢您的解答 我的理解如下 尽管我很高兴被纠正 内联元
  • C++ Windows 中的 RAW 套接字

    我想用一个RAW Socket在 Visual C 中 我看到了一个函数Linux这是 int out socket AF INET SOCK RAW htons ETH P ALL 使用此代码linux我们可以做到这一点 但是如何在 Wi
  • C 中结构体和数组哪个更快?

    我想实现 抽象地表示 一个二维 4x4 矩阵 我为矩阵乘法等编写的所有代码都将完全 展开 也就是说 我不会使用循环来访问和写入矩阵中的数据条目 我的问题是 在 C 中 使用这样的结构会更快吗 typedef struct double e0
  • 如何正确处理 LinqToSql 类的 System.Nullable 字段?

    我有一个带有一些可为空双字段的表 使用 LinqToSQL 尝试直接使用该字段我得到 参数类型 System Nullable 不可分配给参数类型 double 我该如何正确处理这个问题 该问题与 Linq 无关 这与之间的转换有关doub
  • React Native ScrollView/FlatList 不滚动

    我有一个数据列表 我想将其放入 FlatList 即 ScrollView 中 每当我尝试向下滚动以查看列表的更多内容时 ScrollView 就会弹回到列表顶部 因此我永远看不到列表底部 我正在使用 Expo 奇怪的是 如果我只是创建一个