Question

我正在尝试从当前屏幕导航到“个人资料”屏幕，并使用ListItem onPress属性传递参数。 ListItems可以正确显示在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);

Answer 1

您的代码正确，只需尝试在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;

React Native：ListItem在onPress上什么都不做

1 个答案: