Question

我正在尝试创建一个组件，当单击某个子组件时，它将用Lottie动画临时替换其中一个子组件。

这是我到目前为止拥有的代码-关于如何实现的任何想法： a）在下面的组件中获取toggleAnimation函数以工作 b）是否具有使其恢复到初始状态的功能（在3秒后显示<Text>组件？

基本上最初它将显示<Text>Component to swap</Text>组件，并且在单击<Text>Click to Copy<Text>时，它将暂时将<Text>Component to swap</Text>组件与<LottieView>交换3秒钟，然后显示<Text>Component to swap</Text>再次出现。

从'react'导入React 从'react-native'导入{SafeAreaView，Text，View} 从“ lottie-react-native”导入LottieView；

const copyComponent = () => {

    const [show, setShow] = React.useState(false)
    const toggleAnimation = () => setShow(show => !show)

    return (
        <SafeAreaView>
            <Text onPress={toggleAnimation}>Click to copy</Text>
                    <View>
   {(!this.state.toggleAnimation) ? <Text>Component to swap</Text> : <LottieView
                  source={require('./lottieAnimation.json')}
                  autoPlay
                  style={{height: 50, justifyContent: 'center'}}
                />}
                    </View>
         
        </SafeAreaView>
    )
}

export default copyComponent;

编辑

下面是代码的更新版本，其中包含建议。尽管出于某种原因，第一行（const [show, setShow] = useState(false);）导致Invariant Violation: Invalid hook call错误。

const [show, setShow] = useState(false);
const swapAnimation = () => {
  if (!show) {
    setShow(true);
    setTimeOut(() => setShow(false), 3000);
  }
};

const copyComponent = () => (
        <SafeAreaView>
            <Text onPress={toggleAnimation}>Click to copy</Text>
                    <View>
   {!show ? <Text>Component to swap</Text> : <LottieView
                  source={require('./lottieAnimation.json')}
                  autoPlay
                  style={{height: 50, justifyContent: 'center'}}
                />}
                    </View>

        </SafeAreaView>
    )
}

export default copyComponent;

Answer 1

您可以将toggleAnimation修改为也有setTimout

 const toggleAnimation = () => {
     if (!show) { 
       setShow(true)
       setTimeout(() => setShow(false)  ,3000) //3 sec
}}

请注意，我检查了if (!show)，以阻止用户在setTimeOut尚未完成时再次运行该功能

另一件事是!this.state.toggleAnimation，第一个toggleAnimation不是状态，第二个它是功能组件，因此我不遵循this关键字的用法，您可能打算使用show

编辑

您在组件外部调用该钩子，将其放入内部


const copyComponent = () => {
  const [show, setShow] = useState(false);
  const swapAnimation = () => {
  if (!show) {
    setShow(true);
    setTimeout(() => setShow(false), 3000);
   }
  };
  return <SafeAreaView>
            <Text onPress={toggleAnimation}>Click to copy</Text>
             <View>
              {!show ? <Text>Component to swap</Text> : <LottieView
                  source={require('./lottieAnimation.json')}
                  autoPlay
                  style={{height: 50, justifyContent: 'center'}}
                />}
              </View>
        </SafeAreaView>
 }

export default copyComponent;

React Native：按下<TouchableOpacity>时临时渲染组件

1 个答案: