Question

我只有按照React native - "this.setState is not a function" trying to animate background color?的建议并入useEffect（）钩子之后，才遇到此问题。

有了以下内容，我得到了

与上次渲染相比，渲染了更多的钩子

const numberToRoman = (num, rom = "") => {
  if (num === 0) return rom;
  for (var i = convArr[0].length - 1; i >= 0; i--) {
    if (num >= convArr[0][i]) {
      return numberToRoman(num - convArr[0][i], rom + convArr[1][i]);
    }
  }
};

const convArr = [
  [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000],
  ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 'CD', 'D', 'CM', 'M'],
];

const someNumber = 2328;
console.log(numberToRoman(someNumber));

我只是想为动画设置淡化视图的背景色。我尝试删除第一个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'),
      });
      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>
      );
  }
};

新错误：

提供给“样式表”的无效道具“颜色”

未指定动画useNativeDriver

Answer 1

从useFonts开始，在您返回<AppLoading />时，将仅调用!fontsLoaded钩子（我猜）。其余的钩子位于else块中，这意味着在每个渲染器上钩子的数量都不相同。

查看TypeScript decorators以获得更多说明，尤其是https://reactjs.org/docs/hooks-rules.html

响应本机-“渲染的钩子比以前的渲染还要多？”

1 个答案: