时间戳

首页 > 解决方案 > 如何从这样的 react-navigation v5 函数中的帖子中获取 id？

react-native - 如何从这样的 react-navigation v5 函数中的帖子中获取 id？

问题描述

我正在尝试获取以前使用 react-navigation v4 获得的帖子的 ID，如下所示：

这是我的索引屏幕

1import React, { useContext } from 'react';
2import { View, Text, StyleSheet, FlatList, Button, TouchableOpacity } from 'react-native';
3import { Context } from '../../context/BlogContext'; 
4import { Feather } from '@expo/vector-icons';
5
6const IndexScreen = ({ navigation }) => {
7  const { state, addBlogPost, deleteBlogPost } = useContext(Context);
8  return (
9    <View style={styles.container}>
10    <Button title="Add Post" onPress={addBlogPost} />
11      <FlatList
12        data={state}
13        keyExtractor={blogPost => blogPost.title}
14        renderItem={({ item }) => {
15          return (
16            <TouchableOpacity onPress={() => navigation.navigate('Show', { id: item.id })}>
17              <View style={styles.row}>
18                <Text style={styles.title}>{item.title} - {item.id}</Text>
19                <TouchableOpacity>
20                  <Feather style={styles.icon}
21                    name="trash"
22                    onPress={() => deleteBlogPost(item.id)}
23                  />
24                </TouchableOpacity>
25              </View>
26            </TouchableOpacity>
27          );
28        }}
29      />
30    </View>
31  );
32 }
33
34IndexScreen.navigationOpitions = () => {
35  return {
36    headerRight: () => (
37      <TouchableOpacity onPress={() => navigation.navigate('Create')}>
38        <Feather name="plus" size={30} />
39      </TouchableOpacity>
40    ),
41  };
42}
43
44const styles = StyleSheet.create({
45  row: {
46    flexDirection: 'row',
47    justifyContent: 'space-between',
48    paddingVertical: 15,
49    paddingHorizontal: 10,
50    borderTopWidth: 1,
51    borderBottomWidth: 1,
52    borderColor: 'grey'
53  },
54  title: {
55    fontSize: 18,
56  },
57  icon: {
58    fontSize: 24,
59    color: '#ff2222'
60  }
61});
62
63export default IndexScreen;
64

现在，我使用 state.find (blogPost => blogPost.id === navigation.getParam('id')) 获取博客文章的显示屏幕，如第 10 行所示。

1import { useNavigation } from '@react-navigation/native';
2import React, { useContext } from 'react';
3import { View, Text, StyleSheet } from 'react-native';
4import { Context } from '../../context/BlogContext';
5
6const ShowScreen = ({  navigation }) => {
7  const navigation = useNavigation();
8  const { state } = useContext(Context);
9
10    const blogPost = state.find (blogPost => blogPost.id === navigation.getParam('id'));
11
12      return (
13        <View>
14           <Text>{blogPost}</Text> 
15        </View>
16      );
17};
18
19const styles = StyleSheet.create({});
20
21export default ShowScreen;
22

现在我不再使用 react-navigation v4，而是使用 v5，但我想在第 14 行的文本行中获取 blogPost。我应该怎么做才能得到它？

标签： react-nativeparametersreact-navigation-v5getparameter

解决方案

const ShowScreen = ({ route, navigation }) => {
const { state } = useContext(Context);
const {id} = route.params;

      return (
        <View>
           <Text>{id}</Text> 
        </View>
      );
};

有关更多信息，请查看反应导航文档

推荐阅读