Блог

Я пытаюсь показать анимацию Лотти, если ответ API верен. Вот мой код:

     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 отсутствует в разделе «рендеринг и возврат», но я не знаю, как это исправить.

Добавьте значение useState isFetched, значение по умолчанию-false. Если ответ верен, измените состояние на true. В рендере добавьте это:

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