时间戳

首页 > 解决方案 > 在 React Native (expo) 中的 flatlist 元素上定位绝对子元素

react-native - 在 React Native (expo) 中的 flatlist 元素上定位绝对子元素

问题描述

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

为了做到这一点，我有一个包含所有圆圈的平面列表

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

有任何想法吗 ？谢谢

标签： react-nativepositionabsolute

解决方案

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

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

或者，您可以使用alignSelf: 'flex-end'或alignSelf: 'flex-start'进一步您可以通过在视图内使用边距/填充来放置它。你可以在这里阅读更多关于绝对不能在他们的官方文档中工作的信息

推荐阅读