我创建了两个文件(profile.jspostImage.js).Profile.js屏幕显示照片列表,类似于Instagram个人资料屏幕.当用户点击照片时,相同的照片会自动以更大的尺寸打开,但在postImage.js屏幕上.在app.js文件中,我导入了两个屏幕,但当我try 打开照片时,收到一个错误:

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',
    }}
/>

推荐答案

PostImage页/屏幕被命名为"PostImage",例如来自name='PostImage'props .

<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 });
};

Reactjs相关问答推荐

条件索引路由

如何在react 流中使用文本区域和改变 node 的输入大小?

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware?

在Reaction中单击并显示子组件延迟/动画

我应该如何管理设置组件初始状态的复杂逻辑?

在REACT-RUTER-DOMV6中使用通用页面包装组件有问题吗?

在Reaction中的第一次装载时,Use Effect返回空数组

在每页上应用字体-NextJS

用于获取带有事件处理程序的API的动态路由

如何通过reactjs正确显示记录

无法在下一个标头上使用 React hooks

无法通过 fetch 获取数据到上下文中

我如何使用 React toastify (Promise) toast 和邮箱 js

在React中使用if条件时如何更改Tailwind中元素的文本 colored颜色

ReactJS 中的图像加载顺序

文本的几个词具有线性渐变 colored颜色 - React native

antd 找不到 comments

具有自动完成功能的 Formik material ui 无法按预期工作

使用 React、Redux 和 Firebase 的无限循环

在react 路由dom版本6中的组件内添加路由