You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native Web中Animated组件动画不生效问题求助

React Native Web 动画不更新界面问题

我搭建了一个最简的动画示例,为val设置监听器时,能看到值正常从1变为0,但屏幕上完全没有反映出这个变化——"Hello World"始终不会消失。只有强制触发重渲染(通过添加并更新一个状态变量),界面才会显示val的当前值。动画值变化时本不应需要强制重渲染才能看到效果,恳请各位提供帮助。

App.tsx

// @ts-ignore-next-line
import { View, Animated, Text } from 'react-native';
import React, { FunctionComponent, useRef, useEffect } from 'react';

const App:FunctionComponent<{}> = () => {
  const val = useRef(new Animated.Value(1)).current;
  useEffect(() => {
    Animated.timing(val, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: false
    }).start() 
  }, [])

  return (
    <View style={{height: "100%", width: "100%"}}>
      <Animated.View style={{opacity: val}}>
        <Text style={{fontSize: 50}}>
          Hello world
        </Text>
      </Animated.View>
    </View>
  );
}

webpack.config.js

module.exports = {
  entry : {
    index: './src/index.tsx'
  },
  module : {
    rules : [
      {
        test: /\.(js|jsx)$/,
        resolve: {
          extensions: ['.web.js', '.ts', '.js', '.tsx', '.jsx'],
        },
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"],
            plugins: ['react-native-web'],
          }
        }
      },
      // Typescript loader
      {
         test: /\.(ts|tsx)$/,
         resolve: {
           extensions: ['.ts', '.js', '.tsx', '.jsx'],
         },
         exclude: /node_modules/,
         use: ["ts-loader"],
      },
      {
        test: /\.html$/,
        use: "html-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.ttf$/,
        loader: 'file-loader',
      },
    ],
  },
  
  resolve: {
    alias: {
        'react-native$': 'react-native-web',
        '../Utilities/Platform': 'react-native-web/dist/exports/Platform',
        '../../Utilities/Platform': 'react-native-web/dist/exports/Platform',
        './Platform': 'react-native-web/dist/exports/Platform',
        'react-native-linear-gradient': 'react-native-web-linear-gradient',
    }
  }
}

内容的提问来源于stack exchange,提问作者Dale_Plante

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 00:45:31