React-Native: возможно ли получить позиции макета FlatList

Question

Как я указал на рисунке со стрелкой, я бы хотел получить верхние позиции FlatList. Я пробовал onLayout реквизит, но он возвращает только нулевые значения.

Есть ли в любом случае, чтобы получить верхние позиции FlatList?

Answer 1

return (
    <View style={styles.container}>
        <SafeAreaView style={styles.top} />
        <FlatList
          ...
        />
    </View>
);
}

const styles = StyleSheet.create({
    top: { flex: 0 },
}

Answer 2

Проверьте ниже образец

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,
  },
});

Измените это в соответствии с вашими требованиями.

Надеюсь, это поможет вам. Не стесняйтесь сомнений.