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的主要内容,如果未能解决你的问题,请参考以下文章
我编写了用于在反应中列出书籍的代码,但 FlatList 在我的代码中不起作用,我该如何解决?
react-native-draggable-flatlist 在 ScrollView 中不起作用
更改 FlatList 的唯一 onPressed 项的样式