调用不会在本机中调​​用FlatList中的函数

Question

我正在使用react native开发一个App。我想将参数传递给我的flatlist中的特定记录的函数。但是，平面列表忽略了这行代码： onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />

这是我的代码：

<FlatList
ItemSeparatorComponent={ () => <View style={ styles.rowSep } /> }
horizontal={false}
data={this.state.result}

renderItem={
     ({item}) => (
          <View style={styles.containerrow}>
          <View style={styles.viewPark}>

          <Text style={styles.itemBold}> {I18n.t('Data_e_ora_inizio')}:
          <Text style={styles.itemNormal}>{item.start}</Text></Text>             
          <Text style={styles.itemBold}> {I18n.t('Data_e_ora_termine')}: 
          <Text style={styles.itemNormal}>{item.end}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Energia')}: <Text style={styles.itemNormal}>{item.energy_delivered}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Colonna')}: <Text style={styles.itemNormal}>{item.column_id}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Costo_della_ricarica')}: 
          <Text style={styles.itemNormal}>€ {item.amount}</Text></Text>
          <Text style={styles.itemBold}> {I18n.t('Aggiornamento_del')}:     
          <Text style={styles.itemNormal}>{item.last_update}</Text></Text>
                                         </View>

        <View style={styles.rowCenter}>
          <Button label={I18n.t('Via_questa_ricarica')} color={defStyleValues.RechargeElectricCar} onPress={ () => {console.log("TEST1"); this.onPressTopUp()} } />
               </View>
            </View>
          )
        }
    keyExtractor={item => item.id}
 />

这也是我的功能：

onPressTopUp(columnID){
        console.log("TEST2, ", columnID);
}

换句话说，我的问题是我需要将每个特定行的columnID传递给FlatList中的onPressTopUp(columnID)函数。我检查了控制台日志，即使它没有显示TEST1和TEST2。你能帮帮我吗？

Answer 1

只需使用箭头功能，它将负责绑定。

你的职能是： -

onPressTopUp(columnID){
        console.log("TEST2, ", columnID);
}

替换为箭头功能： - ，它将适合您。

onPressTopUp = (columnID) => {
     console.log("Test, ", columnID);
}

并在Button中添加标题属性

您可以使用以下按钮： -

import { Button } from 'react-native';
...

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

Answer 2

我认为问题是你没有bind onPressToUp功能，试试这个：

onPressTopUp = (columnID) => {
     console.log("Test, ", columnID);

}

Answer 3

是否从React Native导入了Button组件？因为本机Button组件没有label属性。 您是否尝试过具有列ID的调用函数，如this.onPressTopUp（15）。 希望这有帮助。