React Native - TouchableNativeFeedback 组件的水平平面列表 OnPress 未执行答案

【问题标题】：React Native - Horizontal Flatlist OnPress of component with TouchableNativeFeedback not executingReact Native - TouchableNativeFeedback 组件的水平平面列表 OnPress 未执行
【发布时间】：2019-08-07 18:39:04
【问题描述】：

我有一个水平平面列表，当按下列表中的任何元素时，我想在其中执行一个函数。但是，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,
      },
  })

【问题讨论】：

你是为安卓运行的吗？
@sdkcy 是的，我现在正在使用安卓模拟器。
可能是样式问题。你知道，在 Android 中存在布局问题。也许您可以在模拟器中检查您的组件样式。

标签： javascript react-native react-native-flatlist touchableopacity onpress

【解决方案1】：

问题可能是它可能没有进入 flatlist 渲染项方法中。通过在 flatlist 渲染项方法中添加警报来调试它。

还可以查看这是否适用于 TouchableOpacity。尝试赋予内部视图样式并查看它们是否呈现。如果使用 android 也可以尝试使用 zIndex

【讨论】：