3 回答

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
如果你的組件是一個(gè)你不應(yīng)該使用的函數(shù)this.state.
,但你必須直接調(diào)用狀態(tài)名稱(chēng)。
在您的代碼中:
var bgColor = color.interpolate({...})
代替:
var bgColor = this.state.color.interpolate({...})
從反應(yīng)文檔
閱讀狀態(tài)
當(dāng)我們想在一個(gè)類(lèi)中顯示當(dāng)前計(jì)數(shù)時(shí),我們讀取 this.state.count:
<p>You clicked {this.state.count} times</p>
在函數(shù)中,我們可以直接使用count:
<p>You clicked {count} times</p>

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊
這是一個(gè)示例,不要為動(dòng)畫(huà)值創(chuàng)建狀態(tài),而是使用備忘錄對(duì)其進(jìn)行一次初始化并使用計(jì)時(shí)功能對(duì)其進(jìn)行更新
小吃:https ://snack.expo.io/GwJtJUJA0
代碼:
export default function App() {
const { value } = React.useMemo(
() => ({
value: new Animated.Value(0),
}),
[]
);
React.useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(value, {
toValue: 1,
duration: 1000,
}),
Animated.timing(value, {
toValue: 0,
duration: 1000,
})
])
).start();
}, []);
const backgroundColor = value.interpolate({
inputRange: [0, 1],
outputRange: ['#0dff4d', '#ff390d'],
});
return (
<View style={styles.container}>
<Animated.View style={{ width: 200, height: 100, backgroundColor }} />
</View>
);
}

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊
在功能組件中,您不使用 訪問(wèn)組件的狀態(tài)屬性/變量this.state.abc,而是直接使用狀態(tài)變量的名稱(chēng)。所以你應(yīng)該做的是:
var bgColor = color.interpolate({
inputRange: [0, 300],
outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
});
添加回答
舉報(bào)