React native re-render не работает должным образом - PullRequest
1 голос
/ 02 мая 2020

надеюсь, что вы, ребята, преуспеваете в это трудное время.

, поэтому я новичок ie, и я пытаюсь создать свою первую игру, которая называется "щелчок мышью" и основная идея. за ним у меня есть 30 кнопок каждую секунду, только одна из этих кнопок активна, и пользователь должен нажать эту конкретную кнопку, и если он нажал неправильную, его неудачные попытки увеличиваются на одну.

, так что я сделал это следующее:

export default function App() {
const [count, setCount] = useState(30);
const [random, setRandom] = useState(Math.floor(Math.random() * count));
const [data, setData] = useState([]);

useEffect(() => {
let arr = [];

for (let index = 0; index < count; index++) {
  arr[index] = index;
}

setData(arr);

return () => {
  //cleanup
};
}, [count]);

useEffect(() => {
const inter = setInterval(() => {
  setRandom(Math.floor(Math.random() * count));
}, 1000);

return () => {
  clearInterval(inter);
};
}, []);

const handlePress = (index) => {
alert("you pressed heart no #" + index);
};

return (
<View style={styles.container}>
  <Text>{random}</Text>
  <View style={styles.gameBody}>
    {data.map((i) => (
      <TouchableOpacity
        onPress={() => handlePress(i)}
        key={i}
        style={{ ...styles.gameItem, opacity: random === i ? 1 : 0.3 }}
      >
        <Text style={styles.gameTxt}>❤️</Text>
      </TouchableOpacity>
    ))}
  </View>
</View>
);
}

что я ожидал, что этот код будет делать каждую секунду, случайное число меняется, и, соответственно, случайная кнопка меняет свою непрозрачность, чтобы дать пользователю ощущение, что это текущий активный, но это не происходит, так как я могу это исправить ??

заранее спасибо и не забудьте остаться дома.

1 Ответ

0 голосов
/ 02 мая 2020

Это работало с самого начала, и я изменил это как

<Text style={styles.gameTxt}>❤️</Text>

на

<Text style={styles.gameTxt}>{random === i ? '❤️' : ''}</Text>

и это работал

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...