React Native动画不生效且嵌套视图子元素不显示问题求助

先看你代码里的几个关键问题：

• useEffect无限触发：你的useEffect没有传入依赖数组，这会导致组件每次渲染都重新启动动画，不仅浪费性能，还可能干扰视图渲染。
• Animated.View缺少布局约束：嵌套的Animated.View没有设置布局样式，内部的Image用百分比尺寸时没有父级尺寸参考，自然显示不出来。
• Image百分比尺寸无约束：React Native中百分比尺寸需要父组件有明确的宽高或flex布局支持，否则无法正确计算尺寸。

修复后的代码：

import React, { useState, useEffect } from "react";
import { Animated, StyleSheet, View, Image} from 'react-native';

export default function HomePage() {
  const [fadeAnim] = useState(new Animated.Value(0))

  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 10000,
        useNativeDriver: true
      }
    ).start();
  }, []) // 添加空依赖数组，仅在组件挂载时执行一次

  return (
    <View style={styles.container}>
      {/* 给Animated.View添加布局约束，让内部元素能正确渲染 */}
      <Animated.View style={[styles.animatedContainer, {opacity: fadeAnim}]}> 
        <Image 
          source={require('../assets/logoLogo.png')} 
          style={styles.logo}
        />
      </Animated.View> 
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#00D1FF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  animatedContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    resizeMode: 'contain',
    width: '50%',
    height: '15%',
  }
})

关键修改说明：

1. 给useEffect添加空依赖数组：确保动画只在组件首次挂载时启动，避免无限重渲染。
2. 给Animated.View添加flex布局：让它继承父容器的布局约束，内部Image的百分比尺寸能基于父组件尺寸正常计算。
3. 抽离StyleSheet：样式集中管理，代码更清晰，也符合React Native最佳实践。

如果去掉动画用普通View，同样需要给嵌套View添加布局约束（比如flex、alignItems等），否则内部内容会因无尺寸参考而无法显示。

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