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

我使用以下方法创建火种刷可能会对您有所帮助

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

绝对定位在FlatList中不起作用

1 个答案: