绝对定位在 FlatList 中不起作用

Question

我正在尝试创建一个类似滑动甲板动画的火种。我正在使用 FlatList 来渲染图像。为了将图像堆叠在另一个之上，我使用了“绝对”定位。这个问题是图像没有被渲染，我看到的只是一个空白屏幕。我不确定在 FlatList 中使用定位是否有问题。

我选择 FlatList 的原因是我的堆栈将包含大约 200 到 300 个图像。我想我可以在不使用 FlatList 的情况下通过批量渲染图像来实现这一点（比如一次渲染 10 个图像，然后渲染下一个 10 个，依此类推）。

我想知道是否可以使用 FlatList 来实现。

注意：问题出在 android，我不确定 iOS

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  Dimensions,
  Animated,
  PanResponder
} from "react-native";

const DATA = [
  {
    id: 1,
    text: "Card #1",
    uri: "http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg"
  },
  {
    id: 2,
    text: "Card #2",
    uri: "https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg?h=350"
  },
  {
    id: 3,
    text: "Card #3",
    uri: "http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg"
  }
];

const { width, height } = Dimensions.get("window");

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.position = new Animated.ValueXY();
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (event, gestureState) => true,
      onPanResponderMove: (event, gestureState) => {},
      onPanResponderRelease: (event, gestureState) => {}
    });

    this.state = {
      currentIndex: 0
    };
  }

  extractKey = (item, index) => item.id.toString();

  renderCard = ({ item }) => {
    return (
      <View style={styles.imageContainer}>
        <Image
          source={{ uri: item.uri }}
          resizeMode="cover"
          style={styles.image}
        />
      </View>
    );
  };

  render() {
    return (
      <FlatList
        contentContainerStle={styles.container}
        data={DATA}
        keyExtractor={this.extractKey}
        renderItem={this.renderCard}
        scrollEnabled={true}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  imageContainer: {
    width,
    height: height - 20,
    backgroundColor: "red",
    padding: 10
    position: 'absolute'
  },
  image: {
    flex: 1,
    width: null,
    height: null,
    borderRadius: 20
  }
});

Answer 1

我使用以下方法创建 tinder swiper 可能对你有帮助

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  Dimensions,
  Animated,
  PanResponder
} from "react-native";
const SCREEN_HEIGHT = Dimensions.get('window').height
const SCREEN_WIDTH = Dimensions.get('window').width


const DATA = [
  {
    id: 1,
    text: "Card #1",
    
    uri: "https://images.pexels.com/photos/247932/pexels-photo-247932.jpeg?h=350"
  },
  {
    id: 2,
    text: "Card #2",
    uri: "http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg"
  },
  {
    id: 3,
    text: "Card #3",
    uri: "http://www.fluxdigital.co/wp-content/uploads/2015/04/Unsplash.jpg"
  }
];


  
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.position = new Animated.ValueXY();
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (event, gestureState) => true,
      onPanResponderMove: (event, gestureState) => {},
      onPanResponderRelease: (event, gestureState) => {}
    });

    this.state = {
      currentIndex: 0
    };
  }

  extractKey = (item, index) => item.id.toString();
  
  renderUsers = () => {
    return DATA.map((item,i)=>{
      return(
        <View style={ { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }}>
              <Image
              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
              source={{uri:item.uri}} />
        </View>
      )
    })
  }
  

  render() {
    
   
    return (
      <View style={{marginTop:24,flex:1,backgroundColor:'#eee'}}>
      {
        this.renderUsers()
      }
      </View>
    );
  }
}