为什么我的 Animated API 组件不会在 React Native 中显示？

Question

我正在尝试在动画 Api 中使用插值函数，当我使用图像组件时这有效，但是当我使用 Animated.Image 时什么也没有出现，或者如果我硬编码旋转值它也不起作用或抛出错误。

import React from 'react';
import { StyleSheet, Text, View, Animated, Easing, Image} from 'react-native';


export default class App extends React.Component {
  state = {spinValue : new Animated.Value(0)}

  componentDidMount(){
    Animated.timing(
      this.state.spinValue,
      {
        toValue: 1,
        duration: 3000,
        easing: Easing.linear
      }
    ).start()
  }

  spin = this.state.spinValue.interpolate({
    inputRange: [0, 1], 
    outputRange: ['0deg', '360deg']
  })

  render() {
    return (
      <View style={styles.container}>
        <Animated.Image
          style={{transform: [{rotate: "90deg"}] }}
          source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/1200px-Square_-_black_simple.svg.png'}} />
        <Text>Testing</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

来自 React-native 文档：

Note that for network and data images, you will need to manually specify the dimensions of your image!

您需要在样式道具中添加宽度和高度

为什么我的 Animated API 组件不会在 React Native 中显示？

Why won't my Animated API component show in React Native?

react-native

react-animated