React Native：更新 Flatlist

Question

我想知道如何在调用随机播放功能后更新平面列表。我已经尝试在平面列表中使用“ExtraData”标签，但没有成功。任何帮助将不胜感激！

    const Display = (props) => {
    return (
      <View>
        <View style={{ flexDirection: 'row' }}>
          <Image source={props.img} style={{ width: 200, height: 200 }} />
          <Text>{props.title}</Text>
        </View>
      </View>
    );
}

function Other({ navigation }) {

  function Shuffle(array){
    let x, y, z;
    for(x = 0; x<=2;x++){
      y = Math.floor(Math.random() * 3)
      z=array[x];
      array[x] = array[y]
      array[y] = z
    } console.log(array)
  }



  let Games = [
    { title: "Tic Tac Toe", img: require("./pics/tictac.png") },
    { title: "Connect Four", img: require("./pics/ConnectFour.jpg") },
    { title: "Monopoly", img: require("./pics/mono.png") },
  ];

  return (
    <View>
      <FlatList data={Games} renderItem={({ item }) => <Display source={item} title={item.title} img={item.img}> </Display>} />
      <Button title="Shuffle" onPress={() => {Shuffle(Games)}} />
    </View>
  ); 
}

Answer 1

您的函数不是 return 将新的随机排列数组分配给 Games。最佳做法是将数组存储在 useState 中，以便在更新时强制重新渲染并正确显示。

const [games, setGames] = React.useState([
{ title: "Tic Tac Toe", img: require("./pics/tictac.png") },
{ title: "Connect Four", img: require("./pics/ConnectFour.jpg") },
{ title: "Monopoly", img: require("./pics/mono.png") }]);

然后你的 onPress 函数可以用 Games 调用你的 shuffle 函数，return 新数组，然后用类似 setGames(returnedArray)

的东西更新

编辑：抱歉，刚刚意识到您还需要 FlatList 上的 extraData 属性来告诉它重新渲染。您想要一个像 'isShuffling' 这样的状态，它将被设置为您每次调用 shuffle 函数时切换的 extraData 值。最简单的方法是在 true/false 之间进行更改，因为值本身并不重要：

const shuffleFunc = (array) => {
//(shuffle array and return)
...

setGames(returnedArray);
setIsShuffling(prev => !prev);

这应该会提示 FlatList 呈现新订单。我个人通过编辑 React Native 的 FlatList 文档中的 flatlist-simple snack 来实现这一点。

React Native：更新 Flatlist

React Native: Update Flatlist

reactjs

react-native

react-native-flatlist