动画视图仅缩放屏幕宽度的一半

Question

Animated.View 仅缩放到提供的屏幕宽度的一半。 其次，为什么我必须在样式表中给出宽度才能使它起作用，以及给它长度 1 的具体原因是什么。 如果我将样式表中的宽度增加到 2，进度条会覆盖整个屏幕宽度

    import React from 'react'
    import { View, Animated, StyleSheet, Dimensions, Easing } from 'react-native'

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

    componentDidMount() {
        this.startAnimation()
    }

    startAnimation = () => {
        this.animation = Animated.timing(this.state.percent, {
            toValue: 100,
            duration: this.props.timeRemaining*1000,
            easing: Easing.linear,
            useNativeDriver: true,
        })

        this.animation.start()
    }

    render() {
        return(
            <Animated.View 
                style={[
                    styles.bar,
                    {transform: [{
                        scaleX: this.state.percent.interpolate({
                            inputRange: [0, 100],
                            outputRange: [0, Dimensions.get('window').width]
                        })
                    }] }
                ]}
            />

            // <View style={[styles.bar, {width: Dimensions.get('window').width}]}/>
        )
    }
}

const styles = StyleSheet.create({
    bar: {
        height: 30,
        width: 1,
        backgroundColor: 'tomato',
    }
})

Answer 1

正如我在Animated View scaling only half of the screen width 中所说，你的一半<Animated.View> 不在你的屏幕上，你看不到它。 使用 TranslateX 来解决它。 这对我有用：

import * as React from 'react';
import {
  Animated,
  Dimensions
} from 'react-native';

export default function () {
  const timer = new Animated.Value(0);
  const { width } = Dimensions.get("window");

  const startAnimation = () => {
    Animated.timing(timer, {
      duration: 2000,
      toValue: 1,
      useNativeDriver: true,
      isInteraction: false,
    }).start();
  };

  React.useEffect(() => {
    startAnimation()
  }, []);

  return (
    <Animated.View
      style={[
        {
          width,
          height: 5,
          backgroundColor: 'blue',
          transform: [
            {
              translateX: timer.interpolate(
                {
                  inputRange: [0, 1],
                  outputRange: [-width / 2, 0],
                }
              ),
            },
            {
         // you can use scaleX : timer if you don't need interpolation
              scaleX: timer.interpolate(
                {
                  inputRange: [0, 1],
                  outputRange: [0, 1],
                }
              ),
            },
          ],
        },
      ]}
    />
  );
}