反应的动态活性指标

Question

我有来自数组映射的多个视频，每个视频都有一个活动指标。加载视频后，我想设置为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>
    ))}

Answer 1

，因为 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>
   }

和渲染 -

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

以这种方式，数组中的每个视频都控制着自己的状态。