如何使用 React Native 导航从 FlatList 组件导航到扩展组件

Question

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.

Answer 1

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