FlatList 项目单击不呈现此

Question

export default class HistoryScreen extends BaseScreen {

    constructor(props){
        super(props);   
        this.state = {
            mainListData:[],
            listData:[],
            searchText:'',
        };
    }

    listRowPressed(item) {  
        this.props.navigation.navigate('Details', {
            checkin: item.data
          });
    }

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

                <View style={{ flex:1, backgroundColor: '#FFF'}}>

                    <FlatList
                        data={this.state.listData}
                        renderItem={({item}) => <ListComp data={item} />}
                        keyExtractor={(item, index) => index.toString()}
                    />
                  </View>
            </View>
        );
      } 
}

const ListComp = item => (

    <TouchableOpacity onPress={() => this.listRowPressed(item)
    }>
        <View style={styles.row}>                                       
        </View>
    </TouchableOpacity>
);

我在 FlatList 中显示数据，但是点击项目会给我这个4。 listRowPressed 未定义，我也尝试绑定该函数但没有奏效。 代码有什么问题？

Answer 1

您必须在ListComp组件中传递listRowPressed 。 你的整个代码应该是这样的：

export default class HistoryScreen extends BaseScreen {
  constructor(props) {
    super(props);
    this.state = {
      mainListData: [],
      listData: [],
      searchText: '',
    };
  }

  listRowPressed = (item) => {
    this.props.navigation.navigate('Details', {
      checkin: item.data
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 1, backgroundColor: '#FFF' }}>
          <FlatList
            data={this.state.listData}
            renderItem={({ item }) => <ListComp data={item} listRowPressed={this.listRowPressed} />}
            keyExtractor={(item, index) => index.toString()}
          />
        </View>
      </View>
    );
  }
}

const ListComp = (props) => (
  <TouchableOpacity 
    onPress={() => props.listRowPressed(props.item)}
  >
    <View style={styles.row}>
      {/* Do whatever with props.item here */}
    </View>
  </TouchableOpacity>
);

另请注意，我已将您的方法listRowPressed简单函数转换为箭头函数。

Answer 2

尝试这个

 <FlatList
       data={this.state.listData}
       renderItem={this.listComp}
       keyExtractor={(item, index) => index.toString()}
  /> 


listComp = ({item}) => (

    return(
         <TouchableOpacity onPress={() => this.listRowPressed(item)} >
           <View style={styles.row}> 

           </View>
         </TouchableOpacity>
         );
);