React native 反应本机动态活动指示器

我有多个来自阵列地图的视频，每个视频都有一个活动指示器。我想在视频加载后设置为false

有人能解释一下我可以为每个视频单独做这件事的方法吗。目前在onLoad回调中，它只是设置了一个全局状态值

{revArray.map((camera,index) => (

<View key={'camera'+index} style={{backgroundColor:'#eeeeee'}}>

<TouchableOpacity onPress={() => {this.removePrompt(camera.title.toString())}} style={{padding:6,position:'absolute',right:4,top:8,zIndex:999}}><Image source={require('../Images/delete1.png')} style={{width:16,height:16}}></Image></TouchableOpacity>

       <Text key={'title'+index} style={{color:'#113b92',textAlign:'center',padding:10,fontSize:16,fontFamily:'Lato-Bold'}}>{camera.title}</Text>

       <View style={{backgroundColor:'#000'}}>

       {this.state.isLoading ? ( <View style={{ position: 'absolute',left: 0,right: 0,top: 0,bottom: 0,alignItems: 'center',justifyContent: 'center',zIndex:9999}}>
       <ActivityIndicator size="large" color={'#000'} style={{backgroundColor:'#fff', padding:6, borderRadius:30}} /> 
      </View>
      ): (null)}

        <Video
        onLoad={()=>{this.setState({isLoading:false})}}
        key={'video'+index}
        ref={(ref: Video) => { this.video = ref }}
        style={styles.fullScreen}
        resizeMode='cover'
        source={{uri: camera.video+'?'+new Date()}}
        repeat={true}
      />
      </View>

      </View>

    ))}

{revArray.map（（摄像机，索引）=>(
{this.removePrompt（camera.title.toString（））}style={{{padding:6，位置：'absolute'，right:4，top:8，zIndex:999}>
{camera.title}
{this.state.isLoading？（
)：（空）}
{this.setState（{isLoading:false}}}
键={'video'+index}
ref={（ref:Video）=>{this.Video=ref}}
style={style.fullScreen}
resizeMode='cover'
source={{uri:camera.video+'？'+newdate（）}
重复={true}
/>
))}

因为

isLoading

是呈现阵列中每个视频的组件的状态，它将控制所有视频。。。这里要做的是呈现一个“容器”组件，每个组件都有自己的状态-

   class VideoWrapper extends React.Component {
      state = {
        isLoading: true
      }

      <View key={'camera'+index} style={{backgroundColor:'#eeeeee'}}>
      ...
          <Video
            onLoad={()=>{this.setState({isLoading:false})}}
            key={'video'+index}
            ref={(ref: Video) => { this.video = ref }}
            style={styles.fullScreen}
            resizeMode='cover'
            source={{uri: camera.video+'?'+new Date()}}
            repeat={true}
          />
     </View>
   }

类VideoWrapper扩展React.Component{
状态={
孤岛加载：正确
}
...
{this.setState（{isLoading:false}}}
键={'video'+index}
ref={（ref:Video）=>{this.Video=ref}}
style={style.fullScreen}
resizeMode='cover'
source={{uri:camera.video+'？'+newdate（）}
重复={true}
/>
}

并呈交—

{revArray.map((camera,index) => 
  <VideoWrapper key={camera.id} camera={camera} index={index} />
)}

{revArray.map（（摄像机，索引）=>
)}

这样阵列中的每个视频都可以控制自己的状态。

Nice one Maxwell；）有时你会错过显而易见的事情！