Question

我想知道如何制作动作：触摸列表中的任何项目（我正在使用FlatList）并在React Native - iOS中显示点击位置的提醒。按照下面的说明，代码必须是我的DetailProduct类的重要部分：

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>
    );
  }
}

Answer 1

您需要使用TouchableWithoutFeedback或TouchableOpacity元素包装元素（renderItem函数中的元素），并将onPress函数添加到Touchable元素。在onPress函数中，您可以以您知道单击哪个位置的方式传递项目或索引参数，并显示警报。

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

1 个答案: