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
相关产品推荐
相关产品推荐

