Question

我有一个水平的平面列表，当按下列表中的任何元素时，我想在其中执行功能。但是，OnPress没有执行，波纹效果确实显示。

我目前正在通过控制台的OnPress属性输出进行故障排除。

我曾尝试按照某些人的建议用a来包装组件，但仍然无法正常工作。

这是我的代码

//...IMPORTS



export default class DatePicker extends Component {
    //...
    render() {
        return (
              <FlatList
                  initialScrollIndex={8}
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                  style={styles.datepickerContainer}
                  horizontal= {true}
                  contentContainerStyle={{justifyContent: 'center'}}
                  horizontal={true}
                  data={this.state.datesArray}
                  keyExtractor={item => item.id.toString()}
                  renderItem={({ item }) => (
                           <TouchableNativeFeedback style={styles.view} onPress={() => console.log("Test")}>
                             <View>
                              <NonSelectedDate currentTime={item.currentTime} dateOffset={item.offset}/>
                            </View>
                          </TouchableNativeFeedback>
                  )}
              />
      
        );
    }
  };
  const styles = StyleSheet.create( {
    datepickerContainer: {
        marginTop: 5,
        flexDirection: 'row',
        flex: 1,
        maxHeight: '7.5%',
    },
    view: {
      flex: 1,
        width: width*0.1428,
      },
  })

Answer 1

问题可能是它可能没有输入到平面列表渲染项目方法中。通过在平面列表渲染项方法内添加警报来调试它。

还可以查看它是否与TouchableOpacity一起使用。尝试提供内部视图样式，看看它们是否渲染。如果使用android，也可以尝试使用zIndex

React Native-带有TouchableNativeFeedback的组件的水平Flatlist OnPress不执行

1 个答案: