Question

我在使用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，但是甚至没有用。

Answer 1

问题是我没有说Starred是一个按钮，这就是onPress无法正常工作的原因。

谢谢@HuỳnhLợiNguyễn的小费！

onPress在FlatList中不起作用-React Native

1 个答案: