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

动画。视图仅缩放到提供的屏幕宽度的一半。 第二，为什么我必须在样式表中指定宽度才能工作，以及指定长度为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',
    }
})

从“React”导入React
从“react native”导入{视图、动画、样式表、维度、尺寸}
导出默认类ProgressBar扩展React.Component{
状态={
百分比：新动画。值（0）
}
componentDidMount（）{
这个。startAnimation（）
}
startAnimation=（）=>{
this.animation=Animated.time（this.state.percent{
toValue:100，
持续时间：这个。道具。剩余时间*1000，
放松：放松，线性，
useNativeDriver：没错，
})
this.animation.start（）
}
render（）{
返回(
// 
)
}
}
const styles=StyleSheet.create({
酒吧：{
身高：30，
宽度：1，
背景颜色：“西红柿”，
}
})

正如我在您的

的一半中所说的，您的屏幕不在，您无法看到它。 使用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],
                }
              ),
            },
          ],
        },
      ]}
    />
  );
}

import*as React from'React'；
进口{
有生气的
尺寸
}从“反应本机”；
导出默认函数（）{
常量计时器=新的动画值（0）；
const{width}=Dimensions.get（“窗口”）；
常数startAnimation=（）=>{
动画。计时（计时器{
期限：2000年，
toValue:1，
useNativeDriver：没错，
isInteraction:false，
}).start（）；
};
React.useffect（（）=>{
startAnimation（）
}, []);
返回(
正如我在《你的
的一半》中所说的，它不在你的屏幕上，你无法看到它。
使用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],
                }
              ),
            },
          ],
        },
      ]}
    />
  );
}

import*as React from'React'；
进口{
有生气的
尺寸
}从“反应本机”；
导出默认函数（）{
常量计时器=新的动画值（0）；
const{width}=Dimensions.get（“窗口”）；
常数startAnimation=（）=>{
动画。计时（计时器{
期限：2000年，
toValue:1，
useNativeDriver：没错，
isInteraction:false，
}).start（）；
};
React.useffect（（）=>{
startAnimation（）
}, []);
返回(
从[0,1]插值到[0,1]的目的是什么？正如我在中所说的：ScaleX将一个数字乘以项目宽度。在本例中，我的项目宽度是Dimensions.get（“窗口”）。宽度，那么首先我的项目宽度将为0，因为ScaleX为0，宽度*0=0，并且随着动画的进行，我的比例数增加（项目宽度增加）在它达到1之前，我的项目宽度将是：width*1=Dimensions.get（“window”）。width您的答案没有回答我的问题。无论如何，答案是从[0,1]插值到[0,1]是没有意义的。我认为我的两个答案都很清楚，我在最好的react本机库之一中找到了我的代码。但是如果您认为“从[0,1]插值到[0,1]是没有意义的。”你应该和他们最好的程序员谈谈：）无论如何，选择是你的，你的主要问题是：1.为什么要设置动画。视图只能缩放到屏幕宽度的一半2.为什么我必须在样式表中指定宽度…我已经正确地回答了这两个问题。如果你想要一个解决问题的代码，我已经搜索并测试了一些解决方案，这是最好的解决方案之一。如果你感谢给你这么多时间帮助你的人，这是礼貌的表现。好运气从[0,1]插值到[0,1]的目的是什么？正如我在中所说：ScaleX将一个数字乘以项目宽度。在本例中，我的项目宽度是Dimensions.get（“窗口”）.width，则首先我的项目宽度将为0，因为scaleX为0，而width*0=0，并且随着动画的进行，我的比例数增加（项目宽度增加），直到它达到1，那么我的项目宽度将为：width*1=Dimensions.get（“窗口”）.Width您的回答没有回答我的问题。无论如何，答案是从[0,1]到[0,1]插值没有意义。我认为我的两个答案都很清楚，我在最好的react本机库之一中找到了我的代码。但是如果您认为“从[0,1]到[0,1]插值没有意义”“你应该和他们最好的程序员谈谈：）无论如何，选择是你的，你的主要问题是：1.为什么要设置动画。视图只能缩放到屏幕宽度的一半2.为什么我必须在样式表中指定宽度…我已经正确地回答了这两个问题。如果你想要一个解决问题的代码，我已经搜索并测试了一些解决方案，这是最好的解决方案之一。如果你感谢那些花了那么多时间帮助你的人，那就是礼貌。祝你好运