我创建了两个文件(profile.js和postImage.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',
}}
/>