账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react-native中FlatList设置getItemLayout
    52
    0

    FlatList中有一个getItemLayout方法

    中文网是这么介绍的

    getItemLayout是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。如果你的行高是固定的,getItemLayout用起来就既高效又简单,类似下面这样:
    getItemLayout={(data, index) => (
        {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
     )}

    这上面是需要提前知道内容的尺寸,如果内容的尺寸不是固定的,那该怎么办呢?

    我的想法是通过onLayout方法来获取,但是不知道是不是跟上面提到的“需要提前知道内容的高度”,因为此时内容以及渲染出来了

    有没有什么好的解决方法?

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 雪流狼云 普通会员 1楼

      在React Native中,FlatList默认的itemLayout是"space-between",即每个项目之间有固定的距离。如果你想改变这个布局,你可以通过设置getItemLayout方法来实现。

      以下是一个示例:

      ```javascript import React from 'react'; import { FlatList, Text } from 'react-native';

      const MyList = () => { return ( ( {item.name} )} renderItem={({ item }) => ( {item.id} )} keyExtractor={(item) => item.id} /> ); };

      export default MyList; ```

      在这个示例中,我们设置了keyExtractor为一个函数,该函数用于生成每个项目的唯一标识符。然后,我们在renderItem方法中使用这个标识符来设置itemLayout。

      如果你想更改space-between,你需要修改keyExtractor的返回值。例如,如果你想设置每个项目的间隔为3,你可以这样做:

      javascript keyExtractor={(item) => item.id + ' - ' + item.name + ' - ' + item.id + ' - ' + item.id + ' - ' + item.id + ' - ' + item.id}

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部