在 React Native 中将绝对子元素定位在 flatlist 元素上（expo）

Question

我想做一个小游戏，当一些圆圈从屏幕顶部出现时。它们出现后会向下拖动，直到离开屏幕。

为此，我有一个包含所有圆圈的平面列表

 <FlatList scrollEnabled={false}renderItem={this.renderItem}data={this.state.elements} />

然后在渲染项目中我插入圆形项目视图

   renderItem = ({item}) => (
    <Circle
        apparitionTime={new Date().getTime() / 1000}
        id={item.id}
        removeCircle={this.removeCircle}
        updateScore={this.updateScore}/>
);

圆形项目如下所示：

  <Animated.View style={[/*this.moveAnimation.getLayout(),*/ styles.animatedView]}>
            <TouchableOpacity style={styles.circleStyle} onPress={() => this.prepareToSend()}>
                <View style={styles.absoluteView}>
                </View>
                <Image style={styles.image} source={require('../assets/images/music.png')}/>
            </TouchableOpacity>
        </Animated.View>

我使用动画视图让它们在整个视图中滚动。

我希望动画视图位于绝对位置，但无论我在将动画视图发送到绝对位置后尝试了什么，元素都消失了

   animatedView: {
    top: 0,
    zIndex: 100,
    width: 75,
    height: 75,
    position: "absolute", // does not work
},

有什么想法吗？谢谢

Answer 1

绝对位置在平面列表中不起作用。

现在如何在其中渲染位置元素！！！！！！！！！....

Alternatively, you can use alignSelf: 'flex-end' or alignSelf: 'flex-start' and further you can place it by using margin/padding inside the view. More you can read here about absolute not working in their official docs

在 React Native 中将绝对子元素定位在 flatlist 元素上（expo）

Position absolute children on flatlist element in React Native (expo)

position

absolute

react-native