Блог

Я создаю базовое приложение для блога с использованием ReactNative. На главном экране отображается плоский список записей с заголовком, ключом и автором. Я хочу иметь возможность щелкнуть по отдельному сообщению и перейти к новому экрану с полным сообщением в блоге. Я постараюсь дать как можно больше кода, чтобы объяснить мою проблему.

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

По сути, я хочу взять сообщение, отображаемое в PostList, и при нажатии я хочу перейти к ExpandedPost, который содержит все данные из конкретного сообщения.

Это может помочь

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