时间戳

首页 > 解决方案 > React Native iOS - FlatList：单击列表中的任何项目并显示警报

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

问题描述

我想知道如何进行操作：在 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>
    );
  }
}

标签： reactjsreact-nativereact-native-iosreact-native-flatlist

解决方案

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

推荐阅读