onPress 在 FlatList 中不起作用 - React Native

Posted 2023-04-18

【中文标题】onPress 在 FlatList 中不起作用 - React Native

【英文标题】：onPress not workin in a FlatList - React Native

【发布时间】：2020-03-21 08:29:12

【问题描述】：

我在使用 github API 的常规应用程序中工作，但无法解决问题。

在我的 FlatList 上，我试图实现一个 onPress 来输入一个 Webview，但是这个 onPress 由于某种原因无法正常工作。我什么都试过了。现在我只是放了一个console.log，但仍然无法正常工作。代码如下：

import React, Component from 'react';
import ActivityIndicator from 'react-native';
import PropTypes from 'prop-types';
import api from '../../services/api';

import 
  Container,
  Header,
  Avatar,
  Name,
  Bio,
  Stars,
  Starred,
  OwnerAvatar,
  Info,
  Title,
  Author,
  Loading,
 from './styles';

export default class User extends Component 
  static navigationOptions = (navigation) => (
    title: navigation.getParam('user').name,
  );

  static propTypes = 
    navigation: PropTypes.shape(
      getParam: PropTypes.func,
    ).isRequired,
  ;

  state = 
    stars: [],
    loading: false,
    page: 1,
    end: false,
    refreshing: false,
  ;

  async componentDidMount() 
    this.loadItems();
  

  loadItems = async (page = 1) => 
    const stars = this.state;
    const navigation = this.props;
    const user = navigation.getParam('user');
    this.setState(loading: true);

    const response = await api.get(`/users/$user.login/starred?page=`, 
      params: page,
    );

    this.setState(
      stars: page >= 2 ? [...stars, ...response.data] : response.data,
      loading: false,
      page: response.data.length == 0 ? page - 1 : page,
      end: response.data.length == 0 ? true : false,
      refreshing: false,
    );
  ;

  loadMore = async () => 
    const page, end = this.state;
    const pageNum = page + 1;

    
      !end ? this.loadItems(pageNum) : '';
    
  ;

  refreshList = () => 
    this.setState(refreshing: true, stars: [], this.loadItems);
  ;

  // Enviar repository via navigate
  handleNavigate = repository => 
    console.log('navi');
    const navigation = this.props;
    navigation.navigate('Repository', repository);
  ;

  teste = () => 
    console.log('testado...');
  ;

  render() 
    const navigation = this.props;
    const stars, end = this.state;
    const user = navigation.getParam('user');
    return (
      <Container>
        <Header>
          <Avatar source=uri: user.avatar />
          <Name>user.name</Name>
          <Bio>user.bio</Bio>
        </Header>
        <Stars
          onRefresh=this.refreshList
          refreshing=this.state.refreshing
          data=stars
          onEndReachedThreshold=0.2
          onEndReached=this.loadMore
          keyExtractor=star => String(star.id)
          ListFooterComponent=
            !end ? () => <ActivityIndicator size="large" color="#00ff00" /> : ''
          
          renderItem=(item) => (
           ** <Starred onPress=() => console.log('clicked')> **
              <OwnerAvatar source=uri: item.owner.avatar_url.toString() />
              <Info>
                <Title>item.name</Title>
                <Author>item.owner.login</Author>
              </Info>
            </Starred>
          )
        />
      </Container>
    );
  

您能帮我找出可能是什么问题吗？我只是想做这个console.log，但连这个都行不通。

【问题讨论】：

什么是Starred？它实际上有onPress 事件吗？尝试用按钮替换Starred，看看它是否适用于按钮（实际上有onPress）。

加星标的是我制作的组件。我会试试的

你明白了@HuỳnhLợiNguyễn！我的样式没有配置为按钮！谢谢！

不客气。

【参考方案1】：

问题是我没有说 Starred 是一个按钮，这就是 onPress 不起作用的原因。

感谢@Huỳnh Lợi Nguyễn 的提示！