在 setInterval 期间，React Native 可触摸不透明度在平面列表中失败

Question

我有一个 FlatList，其中所有项目都是 TouchableOpacities，它们每个都有一个 onClick 函数，在我添加一个 Slider 之前它工作得很好，它会随着时间的推移从 setInterval 函数自动滑动。这是该应用程序页面的样子（歌曲标题是 TouchableOpacities）：

以下是此问题的重要代码部分：

<FlatList
      data={queueItems}
      renderItem={renderItem}
      keyExtractor={item => Math.floor(Math.random() * 1000000).toString()}
 />

const renderItem = ({ item }) => {
    return(
        <dataContext.Consumer>
        {({ setModalVisible }) => (
             <TouchableOpacity onPress={() => {setModalVisible(true, item)}} style={styles.QueueContainer}>
                  <Text style={styles.text}>{item.title}</Text>
             </TouchableOpacity>
        )}
        </dataContext.Consumer>
    );
}

<Slider
    value={playSeconds} maximumValue={duration}
    onSlidingStart={value => onSliderEditStart()}
    onSlidingComplete={value => onSliderEditEnd(value)}
    maximumTrackTintColor='gray'
    minimumTrackTintColor='blue'
    thumbTintColor='white' 
    style={{flex:1, alignSelf:'center'}}
 />

        async componentDidMount(){
            setInterval(() => { if(this.sound && this.sound.isLoaded() && !this.sliderEditing){
                this.sound.getCurrentTime((seconds) => {
                    this.setState({playSeconds:seconds});
                })
            }}, 100);
        };

        this.onSliderEditStart = () => {
            this.sliderEditing = true;
            console.log('start');
        }
        this.onSliderEditEnd = (value) => {
            if(this.sound){
                this.setState({
                    playSeconds: value,
                });
                this.sound.setCurrentTime(value);
            }
            this.sliderEditing = false;
            console.log('end');
        }

我知道问题与 setInterval 有关，因为当我从代码中取出 setInterval 时 onPress 函数起作用。此外，我尝试将 setInterval 更改为 5 秒，并且 onPress 将在除 5 秒间隔之外的任何时间工作。这个问题也一定与 FlatList 有关，因为 FlatList 之外的 TouchableOpacities 工作得很好。

Answer 1

已解决问题是使用以下方法为平面列表中的每个项目生成密钥：

keyExtractor={item => Math.floor(Math.random() * 1000000).toString()}

出于某种原因，以这种方式生成密钥非常麻烦。

在 setInterval 期间，React Native 可触摸不透明度在平面列表中失败

React Native touchable opacity fails inside a flatlist during setInterval

setinterval

react-native

touchableopacity

react-native-flatlist