React-Native进阶：数组状态管理 Array State

前言

        在我进行实战项目的时候，经常会用到的一个操作就是为多个列表循环内容维护一个独立的状态，比如我正在观看短视频内容的时候，点击屏幕对当前视频进行暂停，然后在我滑动到下一个视频的时候，我希望是自动播放的，那么这种情况，就需要为每个视频内容维护一个独立的状态。

        如果我每个视频使用的是同一个状态，那么就会导致点击屏幕对当前视频进行暂停的时候，所有视频都会暂停，使用独立的状态就可以避免这种情况。

以下内容将教会你如何进行数组状态管理：

1. 首先，定义你视频数组数据

import React, { useState } from 'react';  
  
// 假设这是你的视频列表数据  
const videos = [  
  { id: 1, title: 'Video 1', url: require('video1.mp4') },  
  { id: 2, title: 'Video 2', url: require('video2.mp4') },  
  // ... 其他视频  
];  

2. 初始化一个与视频列表长度相同的状态数组，用于跟踪播放状态，默认所有视频都是未播放的

  // 初始化一个与视频列表长度相同的状态数组，用于跟踪播放状态  
  // 默认所有视频都是未播放的  
  const initialVideoStates = Array.from({ length: videos.length }, () => ({ isPaused: false })); 
  const [videoStates, setVideoStates] = useState(initialVideoStates);  
 

3. 写一个切换视频播放状态的函数

  // 切换视频播放状态的函数  
  const toggleVideo = (index) => {  
    setVideoStates((prevStates) => {  
      const newState = [...prevStates];  
      newState[index].isPaused= !newState[index].isPaused;  
      return newState;  
    });  
  };  

4. 将切换函数和状态应用到视频上

<PagerView>
{videos.map((el, index) => (
    <PagerView key={el.id} style={{flex:1}} orientation={'vertical'}>
        <Pressable onPress={() => {toggleVideo[index]}}>
        <Video
             style={{ flex:1}}
             source={el.url}
             controls={false}
             fullscreen={false}
             repeat={true}
             resizeMode="contain"
             paused={VideoPaused[index].isPaused}
           />
        </Pressable>
    </PagerView>
    ))}
</PagerView>

        进行以上操作后就可以实现对列表内容的独立状态的控制了。