在新屏幕上显示照片时出现问题 - React

Question

我创建了两个文件（ profile.js 和 postImage.js ）。 profile.js 屏幕显示照片列表，类似于 Instagram 个人资料屏幕。当用户单击照片时，同一张照片会自动以更大的尺寸打开，但在 postImage.js 屏幕上。在 app.js 文件中，我导入了两个屏幕，但是当我尝试打开照片时，出现错误：

Console Error
The action 'NAVIGATE' with payload {"name":"./postImage","params":{"image":18}} was not handled by any navigator.

Do you have a screen named './postImage'?

If you're trying to navigate to a screen in a nested navigator, see ........

这就是 profile.js 屏幕中的代码的样子：

const images = [
  require('../../assets/Users/admin.jpg'),
];

const openImage = (image) => {
  navigation.navigate('./postImage', { image });
};

.........

<View style={styles.Gallery}>
    <ScrollView contentContainerStyle={styles.imageContainer}>
        {[...Array(Math.ceil(images.length / 3))].map((_, i) => (
            <View key={i} style={styles.imageRow}>
                {images.slice(i * 3, i * 3 + 3).map((image, index) => (
                    <TouchableOpacity
                        key={index}
                        onPress={() => openImage(image)}
                        style={styles.imageWrapper}
                    >
                        <Image source={image} style={styles.image} />
                    </TouchableOpacity>
                ))}
            </View>
        ))}
    </ScrollView>
</View>

我在 postImage.js 屏幕中输入的代码：

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

const PostImage = ({ route }) => {

  const { image } = route.params;

  return (
    <View style={styles.container}>
      <Image source={image} style={styles.image} resizeMode="contain" />
    </View>
  );
};

// Styles and other configurations

export default PostImage;

在 app.js 文件中我导入了 screen 并调用：

import PostImage from './screens/profile/postImage';

............

<Stack.Screen
    name='PostImage'
    component={PostImage}
    options={{
        headerShown: true,
        headerBackVisible: true, // ide the back arrow on the Profile screen
        headerTitle: 'Post Image',
        headerStyle: {
            backgroundColor: '#129990',
        },
        headerTintColor: '#ffffff',
    }}
/>

Answer 1

PostImage

页面/屏幕被命名为

"PostImage"

，例如来自

name='PostImage'

道具。

<Stack.Screen
  name='PostImage'
  component={PostImage}
  options={{
    headerShown: true,
    headerBackVisible: true,
    headerTitle: 'Post Image',
    headerStyle: {
      backgroundColor: '#129990',
    },
    headerTintColor: '#ffffff',
  }}
/>

更新处理程序以导航至

"PostImage"

。

const openImage = (image) => {
  navigation.navigate("PostImage", { image });
};