Question

我有一个FlatList，其中所有项目均为TouchableOpacities，并且每个项目都有一个onClick函数，这些函数运行良好，直到我添加了一个滑动器，该滑动器会随着时间从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可触摸不透明度在平面列表内失败

1 个答案: