onPress 在 FlatList 中不起作用 - React Native

Posted

技术标签:

【中文标题】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 的提示!

【讨论】:

以上是关于onPress 在 FlatList 中不起作用 - React Native的主要内容,如果未能解决你的问题,请参考以下文章

当位置为绝对时,onPress 事件在动画视图中不起作用

我编写了用于在反应中列出书籍的代码,但 FlatList 在我的代码中不起作用,我该如何解决?

react-native-draggable-flatlist 在 ScrollView 中不起作用

更改 FlatList 的唯一 onPressed 项的样式

OnPress 后背景颜色变为黑色,当显示在 FlatList 顶部时

在 FlatList 反应原生“keyboardDismissMode”