ReactNative中使用FlatList

最新推荐文章于 2023-05-14 21:52:23 发布

麻麻麻麻的

最新推荐文章于 2023-05-14 21:52:23 发布

阅读量277

点赞数

分类专栏： ReactNative 文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/bubibilailai/article/details/128369388

版权

ReactNative 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

FlatList

循环列表
导入

import {
  FlatList,
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

使用方法:

设置renderItem

//循环的每一个项
renderItem = ({index, item}) => {
    const backgroundColor = this.setBackgroundColor(item.id);
    const flex = this.setFlex(item.id);
    return (
      <TouchableOpacity
        //样式里面相同的元素，后面的元素起作用
        //通过这种数组的方式，可以根据函数实现根据id的不同，项的样式不同
        style={[styles.content, {backgroundColor}, {flex}]}
        //每个项设置点击事件
        onPress={() => this.calculatorClick(item.content)}>
        <Text style={styles.contentText}>{item.content}</Text>
      </TouchableOpacity>
    );
  };
  //根据id设置背景颜色
  setBackgroundColor = id => {
    if (id < 4) {
      return '#808080';
    }
    if (id % 4 === 0) {
      return '#ffa500';
    }
    return '#d3d3d3';
  };
  //根据id设置分布大小
  setFlex = id => {
    if (id === 17) {
      return 2;
    }
    return 1;
  };
  //数据示例
  dataList = [
    {id: 1, content: 'AC'},
    {id: 2, content: '+/-'},
    {id: 3, content: '%'},
    {id: 4, content: '÷'},
    ]

使用flatList

          <FlatList
            data={this.dataList}
            renderItem={this.renderItem}
            //设置列数
            numColumns={4}
          />