React Native中如何在LottieView上层渲染按钮等自定义组件

你当前直接将Button作为LottieView子组件的写法无法生效，LottieView本身没有提供嵌套子组件渲染在动画上层的能力，需要通过外层容器叠加布局实现需求。

正确实现思路 #

• 创建一个大小和LottieView一致的父容器，设置为相对定位
• 将LottieView作为第一个子元素放在容器内，宽高设为和父容器一致
• 所有需要置于顶层的组件放在LottieView之后编写，React Native默认同个父容器内后渲染的组件层级更高，也可以手动设置zIndex调整层级优先级

代码示例 #

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

export default function App() {
  const onPressLearnMore = () => {
    console.log('按钮点击触发');
  };

  return (
    <View style={styles.container}>
      {/* Lottie动画作为背景 */}
      <LottieView
        style={styles.lottieBg}
        source={require('../components/user.json')}
        autoPlay
        loop
      />
      {/* 顶层按钮组件，默认层级高于前面的LottieView */}
      <Button
        onPress={onPressLearnMore}
        title='Learn More'
        color='#841584'
        accessibilityLabel='Learn more about this purple button'
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 400,
    height: 600,
    position: 'relative',
  },
  lottieBg: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
  }
});

注意事项 #

• 遇到层级冲突时，可以手动给不同组件设置zIndex属性调整优先级，数值越大层级越高。
• 如果需要多个组件叠加，只需要按照层级从低到高的顺序在父容器内排列组件即可。

内容的提问来源于stack exchange，提问作者Ibad