反应本机--“呈现的钩子比上一次渲染时多？”
反应本机--“呈现的钩子比上一次渲染时多？”
提问于 2020-07-09 21:42:25
我只在按照useEffect()的建议合并了React native - "this.setState is not a function" trying to animate background color? ()钩子之后才遇到这个问题
用下面的方法，我得到
呈现的钩子比上一次呈现时多。
export default props => {
let [fontsLoaded] = useFonts({
'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
'SequelSans-RomanDisp' : require('./assets/fonts/SequelSans-RomanDisp.ttf'),
'SequelSans-BoldDisp' : require('./assets/fonts/SequelSans-BoldDisp.ttf'),
'SequelSans-BlackDisp' : require('./assets/fonts/SequelSans-BlackDisp.ttf'),
});
if (!fontsLoaded) {
return <AppLoading />;
} else {
//Set states
const [backgroundColor, setBackgroundColor] = useState(new Animated.Value(0));
useEffect(() => {
setBackgroundColor(new Animated.Value(0));
}, []); // this will be only called on initial mounting of component,
// so you can change this as your requirement maybe move this in a function which will be called,
// you can't directly call setState/useState in render otherwise it will go in a infinite loop.
useEffect(() => {
Animated.timing(this.state.backgroundColor, {
toValue: 100,
duration: 5000
}).start();
}, [backgroundColor]);
var color = this.state.colorValue.interpolate({
inputRange: [0, 300],
outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
});
const styles = StyleSheet.create({
container: { flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: color
},
textWrapper: {
height: hp('70%'), // 70% of height device screen
width: wp('80%'), // 80% of width device screen
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
},
myText: {
fontSize: hp('2%'), // End result looks like the provided UI mockup
fontFamily: 'SequelSans-BoldDisp'
}
});
return (
<Animated.View style={styles.container}>
<View style={styles.textWrapper}>
<Text style={styles.myText}>Login</Text>
</View>
</Animated.View>
);
}
};我只是想让风景的背景色褪色。我试着删除第一个useEffect，以防它导致一些冗余，但这没有任何作用。我是ReactNative的新手-这里有什么问题吗？
编辑：
export default props => {
let [fontsLoaded] = useFonts({
'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
'SequelSans-RomanDisp' : require('./assets/fonts/SequelSans-RomanDisp.ttf'),
'SequelSans-BoldDisp' : require('./assets/fonts/SequelSans-BoldDisp.ttf'),
'SequelSans-BlackDisp' : require('./assets/fonts/SequelSans-BlackDisp.ttf'),
});
//Set states
const [backgroundColor, setBackgroundColor] = useState(new Animated.Value(0));
useEffect(() => {
setBackgroundColor(new Animated.Value(0));
}, []); // this will be only called on initial mounting of component,
// so you can change this as your requirement maybe move this in a function which will be called,
// you can't directly call setState/useState in render otherwise it will go in a infinite loop.
useEffect(() => {
Animated.timing(useState(backgroundColor), {
toValue: 100,
duration: 7000
}).start();
}, [backgroundColor]);
// var color = this.state.colorValue.interpolate({
// inputRange: [0, 300],
// outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
// });
//------------------------------------------------------------------->
if (!fontsLoaded) {
return <AppLoading />;
} else {
const styles = StyleSheet.create({
container: { flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: backgroundColor新错误：
提供给“样式表”的
无效道具“颜色”
动画useNativeDriver未指定
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-09 21:53:35
在第一次呈现时(我猜)只有useFonts钩子会被调用，因为您从<AppLoading />返回!fontsLoaded。其余的钩子位于else块中，这意味着每次呈现时都不会有相同数量的钩子。
查看https://reactjs.org/docs/hooks-rules.html以获得更多解释，特别是https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
Stack Overflow用户
发布于 2022-07-02 08:03:00
存在useNativeDriver错误是因为您没有指定它：
你的代码：
useEffect(() => {
Animated.timing(useState(backgroundColor), {
toValue: 100,
duration: 7000
}).start();修正：
useEffect(() => {
Animated.timing(useState(backgroundColor), {
toValue: 100,
duration: 7000,
useNativeDrive: true
}).start();希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62824174
复制相关文章
相似问题
腾讯云开发者
