在 React Native (expo) 中的 flatlist 元素上定位绝对子元素答案

【问题标题】：Position absolute children on flatlist element in React Native (expo)在 React Native (expo) 中的 flatlist 元素上定位绝对子元素
【发布时间】：2020-03-21 15:47:54
【问题描述】：

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

为了让我有一个包含所有圆圈的平面列表

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

有什么想法吗？谢谢

【问题讨论】：

看这个例子，它没有使用FlatListgithub.com/oblador/react-native-animatable/tree/master/Examples/…

标签： react-native position absolute

【解决方案1】：

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

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

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

【讨论】：

嘿 Nicolas Tran，如果它对你有用，你也可以投票给答案....谢谢 :)