本地列表的全局或静态状态

Question

Is it possible that for all the rows of Flatlist there is one static state . I have a Component which i want to display only on the Flatlist 's one row when i click on it. And when i click on other row of Flatlist The Component should not render on previous row but on current clicked row.

Here I have two Rows of Flatlist. I want To render Progress bar only for the clicked cardview or Play Buton. So my logic is when i click the Button Then I somehow put the keyID of clicked Flatlist 's rows in the global state which will only render the clicked Card View's progress bar. Somehow Like this code:

{  GlobalState===this.props.key && (<ProgressBar />)}

as a checker for each Row render in flatlist

Answer 1

I ended up using global variable in component and prop of component.

In renderItem of Flatlist :

function in renderItem of Flatlist

_play = () => {
    this.setState({ playState: "playing" });
    TrackPlayer.play();
    const thisplaying = this.props.item.Key;
    ProgressBar.setCurrentPlayer(thisplaying);//Here I call to put the Key of Item to the component's global variable
  };

using component in render of renderItem of Flatlist

<ProgressBar PlayerKey={this.props.item.Key} />

In Component{ ProgressBar.js } used in renderItem of Flatlist :

import React from "react";
import { View, Slider, Text} from "react-native";
import TrackPlayer, { ProgressComponent } from "react-native-track-player";
import { formatTime } from "./utils";
global.MineKey = null; //Here I used Global Variable
class ProgressBar extends ProgressComponent {
  static setCurrentPlayer = player => {
    global.MineKey = player;         //Setting global variable on every call from the cardview upon play
  };

  onSliderEditStart = () => {
    TrackPlayer.pause();
  };
  onSliderEditEnd = () => {
    TrackPlayer.play();
  };
  onSliderEditing = value => {
    TrackPlayer.seekTo(value);
  };

  render() {
    const position = formatTime(Math.floor(this.state.position));
    const duration = formatTime(Math.floor(this.state.duration));
    return global.MineKey == this.props.PlayerKey ? (  //If Global variable key is equal to the Key of RowItem of Flatlist
      <View style={{ flexDirection: "row",alignItems: "center", flex: 1,width: "100%"}}>
        <Text style={{ color: "white", alignSelf: "center" }}>{position}</Text>
        <Slider
          onTouchStart={this.onSliderEditStart}
          onTouchEnd={this.onSliderEditEnd}
          onValueChange={this.onSliderEditing}
          value={this.state.position}
          maximumValue={this.state.duration}
          maximumTrackTintColor="gray"
          minimumTrackTintColor="white"
          thumbTintColor="white"
          style={{
            flex: 1,
            alignSelf: "center"
          }}
        />
        <Text style={{ color: "white", alignSelf: "center" }}>{duration}</Text>
      </View>
    ) : null;
  }
}
module.exports = ProgressBar;