react-native - React-Native：是否可以获取 FlatList 的布局位置

Question

正如我在带有箭头标记的图片中指出的那样，我想获得FlatList. 我试过onLayout道具，但它只返回空值。

反正有没有获得最高职位FlatList？

标签： react-nativeviewportreact-native-flatlist

Answer 1

检查以下示例

import React, {Component} from 'react';
import {View, FlatList, StyleSheet, Text} from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

export default class HomeScreen extends Component {
  findDimesions = layout => {
    const {x, y, width, height} = layout;
    console.log(x);
    console.log(y);
    console.log(width);
    console.log(height);
  };

  render() {
    return (
      <View
        onLayout={event => this.findDimesions(event.nativeEvent.layout)}
        style={styles.container}>
        <FlatList
          data={DATA}
          renderItem={({item}) => (
            <View style={styles.item}>
              <Text style={styles.title}>{item.title}</Text>
            </View>
          )}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

根据您的要求更改此设置。

希望这对您有所帮助。随意怀疑。