Question

我正在使用ReactNative创建一个基本的博客应用程序。主屏幕呈现带有标题，键和作者的帖子的FlatList。我希望能够单击单个帖子，然后导航到具有完整博客帖子的新屏幕。我将尝试并给出尽可能多的代码来解释我的问题。

// ./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中呈现的帖子，而onPress我想导航到ExpandedPost，其中包含来自特定帖子的所有数据。

Answer 1

这可能有帮助

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

如何使用反应本机导航从FlatList组件导航到扩展组件

1 个答案: