React Native ：ListItem在按下时不执行任何操作

nr7wwzry 于 2022-11-25 发布在 React

关注(0)|答案(2)|浏览(154)

我正尝试从当前屏幕导航到Profile屏幕，并使用ListItem onPress属性传递参数。ListItem在FlatList组件内正确呈现到屏幕上，但是，onPress无法导航到Profile屏幕。

import React from "react";
import { withNavigation } from '@react-navigation/compat';
import { StyleSheet, FlatList} from "react-native";
import { ListItem } from "react-native-elements";
import nerdProfiles from '../constants/nerdProfiles';
import { Block, Text } from 'galio-framework';
import argonTheme from "../constants/Theme";
import { TouchableOpacity } from "react-native-gesture-handler";

class NerdList extends React.Component {
    renderItem = ({item}) => (
    <TouchableOpacity>
      <ListItem 
        title={
          <Block>
          <Text style={styles.names}>
          {item.name}
          </Text>
        </Block>
        }
        subtitle={
          <Block>
            <Text style={styles.descriptions}>
            {item.shortDescription}
            </Text>
          </Block>
        }
        leftAvatar={{ source: { uri: item.image } }}
        bottomDivider
        chevron
        onPress={() => this.props.navigation.navigate('Profile', {test: 'Hello'})}
            />
    </TouchableOpacity>
    );

    render() {
    return (
      <FlatList 
        data={nerdProfiles.bios}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
      />
    );
  };
};
export default withNavigation(NerdList);

react-native

来源：https://stackoverflow.com/questions/60936157/react-native-listitem-does-nothing-onpress

2条答案

按热度按时间

x33g5p2x1#

你的代码是正确的，只是尝试把alert放在onPress函数中。比如，

onPress{()=>alert('ok')}

并检查onPress是否正常工作。如果是，则说明您的导航功能有问题。它无法在导航文件中找到页面配置文件。（可能是页面名称的拼写错误。只需检查一次您在导航文件中声明的内容。）如果警报也不工作，则尝试从ListItem中删除onPress并将其放入TouchableOpacity中。如

<TouchableOpacity onPress={()=>alert('ok')}>

然后尝试添加导航功能

<TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', {test: 'Hello'})}>

下面是我的工作小代码

import React from "react";
import { StyleSheet, FlatList, Text, TouchableOpacity} from "react-native";
import { ListItem } from "react-native-elements";
import Font from 'expo-font'

class NerdList extends React.Component {

    render() {
    return (
      <TouchableOpacity>
      <ListItem 
        title={
          <Text>
          'item.name'
          </Text>
        }
        subtitle={
            <Text>
            'item.shortDescription'
            </Text>
        }
        bottomDivider
        chevron
        onPress={()=>alert('ok')}
            />
    </TouchableOpacity>
    );
  }
}
export default NerdList;

赞(0）回复(0）举报 2022-11-25

j0pj023g2#

当为ListItem提供onPress函数时，它的行为类似于一个可触摸组件。因此，不需要用TouchableOpacity Package ListItem。
父TouchableOpacity捕获onPress函数，但您无法访问ListItem的onPress函数。

赞(0）回复(0）举报 2022-11-25