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

因为// Set the customer ID to the current session $customer = new WC_Customer( 0, true ); // Use the class method to determine vat status $vat_exempt = $customer->is_vat_exempt();是渲染数组中每个视频的组件的状态，它只能控制所有这些...你想要做的是用它渲染一个“容器”组件每个人都有自己的状态 -

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>
   }

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

反应本地动态活动指标

1 个答案: