Блог

Я изучаю react native и впервые создаю приложение. Я пытаюсь создать приложение, которое приносит случайные цитаты. Мое приложение отображает случайную цитату при загрузке страницы, и когда я нажимаю кнопку обновить, оно случайным образом выдает другую цитату. Всякий раз, когда котировки меняются, я хочу, чтобы каждая цитата color также менялась. Но мой приведенный ниже код не работает. Я получаю сообщение об ошибке как cannot set properties of undefined(setting 'color')

Я считаю, что ошибка в том, что я использовал quoteRef.current.style.color = colors[Math.floor(Math.random() * colors.length)] в своем крючке useEffect

Как я могу это сделать, чтобы это сработало?

Кроме того, как можно придать тексту эффект скольжения вниз при нажатии. Я проверил документацию и просмотрел много видео, однако и в этом тоже не смог добиться успеха.

Мое приложение выглядит так, как я прикрепил прямо сейчас:

Мой код приведен ниже:

 app.js  import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View, Button, SafeAreaView, ScrollView } from 'react-native'; import { useState, useEffect, useRef } from 'react';   export default function App() {  const [quotes, setQuotes] = useState([]);  const quoteRef = useRef();  let colors = ["#ffff00", "#90ee90","#ffa500", "#ff68ff", "#a9a9e7"]   const getQuotes = () =gt; fetch('https://quotable.io/quotes?page=1')  .then(response =gt; response.json())  .then(data =gt;  {  let randomQuote = Math.floor(Math.random() * data.results.length);  setQuotes(data.results[randomQuote])  }  );   useEffect(() =gt; {  getQuotes()  }, [])   useEffect(() =gt; {  quoteRef.current.style.color = colors[Math.floor(Math.random() * colors.length)]  }, [quotes])   return (  lt;SafeAreaView style={styles.container}gt;  lt;ScrollViewgt;  {/* {quotes.map(quote =gt; lt;Text key={quote._id}gt;{quote.content}lt;/Textgt;)} */}  lt;Text ref={quoteRef}gt;{quotes.content}lt;/Textgt;  lt;Button  onPress={getQuotes}  title="Refresh"  color="#841584"  accessibilityLabel="Refresh"  /gt;  lt;StatusBar style="auto" /gt;  lt;/ScrollViewgt;  lt;/SafeAreaViewgt;  ); }  const styles = StyleSheet.create({  container: {  flex: 1,  backgroundColor: 'blue',  alignItems: 'center',  justifyContent: 'center',  paddingHorizontal: 10,  paddingTop: Platform.OS === 'android' ? 35 : 0,  }, });   

Я предполагаю, что это произошло потому quoteRef , что изначально пусто

 const quoteRef = useRef();  

и вы пытались получить к нему доступ в этой строке

 useEffect(() =gt; {  quoteRef.current.style.color = colors[Math.floor(Math.random() * colors.length)]  }, [quotes])  

вместо этого вы можете создать состояние для цвета ИЛИ сделать quotes его объектом {text: string, color: string} , чтобы вы могли удерживать как текст цитаты , так и цвет quotes . Я покажу вам пример для обоих случаев.

1. добавьте состояние для цвета

 const [quoteColor, setQuoteColor] = useState("");   useEffect(() =gt; {  setQuoteColor(colors[Math.floor(Math.random() * colors.length)])  }, [quotes])  

2. установить quotes в качестве объекта

 const [quotes, setQuotes] = useState({text: "", color:""});  const getQuotes = () =gt; fetch('https://quotable.io/quotes?page=1')  .then(response =gt; response.json())  .then(data =gt;  {  let randomQuote = Math.floor(Math.random() *   data.results.length);  const randomColor = colors[Math.floor(Math.random() *   colors.length)]  setQuotes({text: data.results[randomQuote], color: randomColor})  }  );