進度條影片在ReactNative中不起作用

我在使用Animated.timing和 useNativeDriver: true時遇到問題。所以我想要一個帶有計時器的非常簡單的進度條，但我得到了錯誤

Error: Style property 'width' is not supported by native animated module

到目前為止我的代碼

  const animProgress = React.useState(new Animated.Value(0))[0];

  const onAnimate = () => {
    Animated.timing(animProgress, {
      useNativeDriver: true,
      toValue: 100,
      duration: 6000, // six seconds long,
      easing: Easing.linear,
    }).start();
  };

  const animWidthPrecent = animProgress.interpolate({
    inputRange: [0, 100],
    outputRange: ["0%", "100%"],
  });

用法

<View
  style={{
    width: "100%",
    height: 40,
    padding: 3,
    borderColor: "red",
    borderWidth: 3,
    borderRadius: 30,
    marginTop: 200,
    justifyContent: "center",
  }}
>
  <Animated.View
    style={[
      {
        width: "100%",
        height: 30,
        borderRadius: 15,
        backgroundColor: "green",
      },
      { width: animWidthPrecent },
    ]}
  />
</View>

但正如我之前所說，它回傳了我上面描述的錯誤......

當我將useNativeDriver: true改為useNativeDriver: false時，它起作用了。但我想使用本機驅動程式。所以我嘗試像這樣使用變換

 <Animated.View
    style={[
      {
        width: "100%",
        height: 30,
        borderRadius: 15,
        backgroundColor: "green",
      },
      {
        transform: [
          {
            scaleX: animWidthPrecent,
          },
        ],
      },
    ]}
  />

但現在它根本不起作用！那么如何使用帶有進度條的本機驅動程式呢？對不起，我的英語不好！

uj5u.com熱心網友回復：

您的代碼對我有用，我只是將輸出范圍替換為 0、1，因為它現在指的是變換值。然而，即使在 0%、100% 的情況下，影片也能正常作業，但行為并不是預期的。

const ProgressBar = (props) => {
    const animProgress = useState(new Animated.Value(0))[0];

    const onAnimate = () => {
        Animated.timing(animProgress, {
            useNativeDriver: true,
            toValue: 100,
            duration: 6000, // six seconds long,
            easing: Easing.linear,
        }).start();
    };

    const animWidthPercent = animProgress.interpolate({
        inputRange: [0, 100],
        outputRange: [0, 1],
    });

    return (
        <>
            <View
                style={{
                    width: '100%',
                    height: 40,
                    padding: 3,
                    borderColor: 'red',
                    borderWidth: 3,
                    borderRadius: 30,
                    marginTop: 200,
                    justifyContent: 'center',
                }}
            >
                <Animated.View
                    style={[
                        {
                            width: '100%',
                            height: 30,
                            borderRadius: 15,
                            backgroundColor: 'green',
                        },
                        {
                            transform: [
                                {
                                    scaleX: animWidthPercent,
                                },
                            ],
                        },
                    ]}
                />
            </View>
            <TouchableOpacity onPress={onAnimate} activeOpacity={0.7}>
                <Text>Click Me</Text>
            </TouchableOpacity>
        </>
    );
};

export default ProgressBar;

標籤：

上一篇：如何在TextInput中檢測高度已達到50%

下一篇：如果未登錄，如何防止React組件呈現