I am creating a basic blog application using ReactNative. The home screen renders a FlatList of posts with a title, key, and author. I want to be able to click on an individual post and navigate to a new screen that has the full blog post. I will try and give as much code as possible to explain my problem.
// ./Post
function Post(props) {
const navigation = useNavigation();
return (
<TouchableOpacity
style={styles.container}
onPress={() =>
navigation.navigate({ name: "ExpandedPost", params: props.id })
}
>
<View>
<Text style={styles.post}>This is the title to a fake post</Text>
<Text style={styles.text}>By {props.Author} </Text>
</View>
<Image
source={{ uri: "https://picsum.photos/200/300" }}
style={styles.thumbnail}
/>
</TouchableOpacity>
);
}
// ./ExpandedPost
export default function ExpandedPost({ navigation, route }) {
return (
<View style={styles.container}>
<View>
<Text style={styles.post}>This is the title to a fake post</Text>
<Text> This is a body of a fake post</Text>
</View>
<Image
source={{ uri: "https://picsum.photos/200/300" }}
style={styles.thumbnail}
/>
</View>
);
}
// ./PostList
const RenderPosts = () => {
return (
<FlatList
data={fakePosts}
renderItem={({ item }) => <Post Author={item.Author} />}
/>
);
};
export default function PostList() {
return (
<View style={styles.container}>
<Header />
<RenderPosts />
</View>
);
}
Basically, I want to take the post that is rendered in PostList, and onPress I want to navigate to ExpandedPost that contains all of the data from the specific post.
This might help
// ./Post
function Post(props) {
const navigation = useNavigation();
return (
<TouchableOpacity
style={styles.container}
onPress={() =>
navigation.navigate("ExpandedPost", {item: props.item})
}
>
<View>
<Text style={styles.post}>This is the title to a fake post</Text>
<Text style={styles.text}>By {props.item.Author} </Text> <-- Change here -->
</View>
...
</TouchableOpacity>
);
}
// ./ExpandedPost
export default function ExpandedPost(props) {
const completeItemOfPost = props.item; <-- Complete Item Here -->
return (
<View style={styles.container}>
<View>
<Text style={styles.post}>This is the title to a fake post</Text> <-- You can show title like "completeItemOfPost.title" -->
<Text> This is a body of a fake post</Text> <-- You can show body like "completeItemOfPost.body" -->
</View>
<Image
source={{ uri: "https://picsum.photos/200/300" }} <-- You can show image like "completeItemOfPost.image" -->
style={styles.thumbnail}
/>
</View>
);
}
// ./PostList
const RenderPosts = () => {
return (
<FlatList
data={fakePosts}
renderItem={({ item }) => <Post item={item} />} <-- Pass complete item here... -->
/>
);
};}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.