无法在 React Native 中导航到下一个屏幕

Question

我创建了一个帖子列表，并希望将一个特定帖子的详细信息传递到另一个屏幕。 我希望能够点击帖子并被定向到帖子详细信息屏幕。 这是 PostList.js 文件：

import React, {Component} from 'react';
import {
  FlatList,
  StyleSheet,
  View,
  Text,
  Modal,
  TouchableOpacity,
} from 'react-native';
import Post from './Post';
import Firebase from 'firebase';
import 'firebase/database';
import {firebaseConfig} from './configFirebase';
import PostDetails from './stack/PostDetails';

export default class Posts extends Component {
  constructor(props) {
    super(props);
    !Firebase.apps.length
      ? Firebase.initializeApp(firebaseConfig.firebase)
      : Firebase.app();

    this.state = {
      postList: [],
      navigation: this.props.navigation,
    };
  }
  state = {
    loading: false,
    currentPost: null,
  };

  componentDidMount() {
    this.getPostData();
  }

  getPostData = () => {
    const ref = Firebase.database().ref('/posts');
    ref.on('value', snapshot => {
      console.log('DATA RETRIEVED');
      const postsObject = snapshot.val();
      if (!postsObject) {
        return console.warn('No data from firebase');
      }
      const postsArray = Object.values(postsObject);
      this.setState({postList: postsArray});
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          keyExtractor={post => post.heading}
          data={this.state.postList}
          renderItem={({item: post}) => (
            <Post
              key={post.heading}
              heading={post.heading}
              description={post.description}
              location={post.location}
              onPress={() => this.props.navigation.push('PostDetails', {post})}
            />
          )}
        />
      </View>
    );
  }
}

export const styles = StyleSheet.create({
  container: {
    borderWidth: 2,
    borderRadius: 5,
    backgroundColor: '#2bb76e',
    flex: 1,
  },
  txtInput: {
    flex: 1,
    margin: 5,
    padding: 5,
    borderWidth: 2,
    fontSize: 20,
    borderRadius: 5,
    backgroundColor: 'snow',
  },
});

我试过 navigation.navigate() 和 navigation.push() 都不起作用。

这是我要导航到的 PostDetails 屏幕并将帖子信息传递给：

import React from 'react';
import {Text, View} from 'react-native';

export default ({route}) => {
  const postInfo = route.params.post;

  return (
    <View>
      <Text>{JSON.stringify(postInfo, null, 2)}</Text>
      <Text>{postInfo.heading}</Text>
    </View>
  );
};

这是我保存屏幕的 HomeStack 文件：

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Posts from '../PostList';
import AddForm from '../AddForm';
import PostDetails from './PostDetails';

const HomeStack = createStackNavigator();

const HomeStackScreen = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen
      name="PostList"
      component={Posts}
      options={{headerTitle: 'big APPetite'}}
    />
    <HomeStack.Screen
      name="PostDetails"
      component={PostDetails}
      options={({route}) => ({heading: route.params.post.heading})}
    />
    <HomeStack.Screen name="NewPost" component={AddForm} />
  </HomeStack.Navigator>
);

export default HomeStackScreen;

Post.js：

import React, {Component} from 'react';
import {
  Image,
  Text,
  StyleSheet,
  View,
  TextInput,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import FavouriteButton from './buttons/FavouriteButton';
import chickenClub from './images/chickenSandwich.jpg';

const Post = ({heading, description, location, username}) => (
  <TouchableOpacity style={postStyle.container}>
    <View style={(postStyle.container, {alignItems: 'flex-start'})}>
      <View style={postStyle.padding}>
        <Image style={postStyle.image} source={chickenClub} />
        <View style={{backgroundColor: (255, 255, 255, 45), borderRadius: 6}}>
          <Text style={postStyle.text}>{heading}</Text>
          <Text style={postStyle.text}>{location}</Text>
          <Text style={postStyle.text}>{username}*username*</Text>
        </View>
      </View>

      <View
        style={{
          alignSelf: 'flex-end',
          flexDirection: 'column',
          backgroundColor: '#2bb76e',
        }}>
        <Text style={postStyle.paragraph}>{description}</Text>
        <View style={{justifyContent: 'flex-start', alignItems: 'flex-end'}}>
          <FavouriteButton />
        </View>
      </View>
    </View>
  </TouchableOpacity>
);

const postStyle = StyleSheet.create({
  container: {
    borderWidth: 2,
    borderRadius: 5,
    backgroundColor: '#2bb76e',
    flex: 1,
  },
  padding: {
    padding: 10,
  },
  heading: {
    backgroundColor: (255, 250, 250, 50),
    flexDirection: 'column',
  },
  paragraph: {
    alignSelf: 'flex-end',
    fontSize: 20,
  },
  username: {},
  image: {
    flexDirection: 'row',
    height: 150,
    width: 150,
  },
  text: {
    fontSize: 25,
    padding: 5,
  },
});
export default Post;

Answer 1

您将onPress传递给您的 Post 组件，但是您没有将该道具应用于TouchableOpacity 。

修改 Post 组件以包括：

const Post = ({heading, description, location, username, onPress}) => (
  <TouchableOpacity style={postStyle.container} onPress={onPress}>