React Native iOS - FlatList：单击列表中的任何项目并显示警报答案

【问题标题】：React Native iOS - FlatList: click on any item in the list and show an alertReact Native iOS - FlatList：单击列表中的任何项目并显示警报
【发布时间】：2018-05-22 19:20:03
【问题描述】：

我想知道如何进行操作：在 React Native - iOS 中触摸列表中的任何项目（我正在使用 FlatList）并显示点击位置的警报。如下，代码必须对我的 DetailProduct 类很重要：

详细产品

export default class DetailProduct extends React.Component {
  state = {
    stores: []
  };

  componentDidMount() {
    this.setState({stores});
  }

  render() {
    return (
      <View style={styles.container}>

            <FlatList 
              data={this.state.stores}
              showsVerticalScrollIndicator={false}
              initialNumToRender={2}

              renderItem={({item, index}) => 

                <View style={styleItem.container}>
                  <View style={styleItem.holderImage}>
                    <Image source={{uri : item.logo_company}} style={{width: '100%', height: '100%'}} resizeMode='contain'/>
                  </View>
                  <Text style={item.amount > 0 ? styleItem.textAvailable : styleItem.textUnavailable}>{item.is_available == true ? 'Disponivel' : 'Indisponivel'}</Text>
                  <TouchableOpacity style={item.amount > 0 ? styleItem.qtdHolder : styleItem.qtdHolderUnavailable} activeOpacity={0.8}>        
                    <Text style={item.amount > 0 ? styleItem.textQtdNum : styleItem.textQtdNumUnavailable}>{item.amount}</Text>
                    <Image source={require('../imgs/assets/ic_arrow_detail_store.png')} style={item.amount > 0 ? styleItem.icShowDetail : {position: 'absolute', top: -1000}}/>
                  </TouchableOpacity>
                </View>

              }
              keyExtractor={item => item.id_store}
            />

      </View>
    );
  }
}

【问题讨论】：

标签： reactjs react-native react-native-ios react-native-flatlist

【解决方案1】：

您需要用TouchableWithoutFeedback 或TouchableOpacity 元素包装您的元素（renderItem 函数中的那个），并将onPress 函数添加到Touchable 元素。在 onPress 函数中，您可以传递 item 或 index 参数，这样您就可以知道单击了哪个位置并显示警报。

【讨论】：