如何在 React Native 中通过函数响应使用组件？

Question

如果 API 响应为真，我将尝试显示 Lottie 动画。这是我的代码：

    export default class Register extends Component{
        constructor(props){
            super(props);
            this.state = {
              //variables
            };   
          }
    
          buttonClick = () =>{
           //variables
            const requestOptions = {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({variables})
          };
            fetch('api_url',requestOptions)
            .then((response) => { return response.json() } ) 
            .catch((error) => console.warn("fetch error:", error))
            .then((response) => {
              console.log(response)
              if(response ==  "true"){
          
                <LottieView
                style={styles.success}
                      source = {require("./lottie/success.json")}
                      autoPlay = {true}
                      loop={false}
                 />
                
              }
            })
         
         
           }
      
        
        render(){
            return (
    //textinputs and buttons
     )
    }
}

但是动画没有出现。我知道它是因为 LottieView 不在“渲染和 return”部分，但我不知道如何修复它。

Answer 1

添加一个useState isFetched，默认值为false。如果响应为真，则将状态更改为真。在渲染中添加：

isFetched && (
  <LottieView
      style={styles.success}
      source = {require("./lottie/success.json")}
      autoPlay = {true}
      loop={false}
 />
)

如何在 React Native 中通过函数响应使用组件？

How Can I Use a Component by Functions Response in React Native?

react-native

lottie