如何重用具有不同 route.params React-Navigation 的 Screen？

Question

我正在尝试通过不同的查询重用我的主屏幕，以下是我的代码。但是 route.params 未定义。

 //screen I want to reuse
 
const Home = () => {
  const [products, setProducts] = useState([]);
  const route = useRoute();
  const navigation = useNavigation();

  
  console.log(route);
  useEffect(() => {
    if (route.params?.data) {
      console.log(route.params?.data);
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
    const fetchProducts = async () => {
      const results = await DataStore.query(Product);
      setProducts(results);
    };
   
    fetchProducts();
  }, [route.params?.data]);

  return (
    <View>
      <FlatList
        data={products}
        renderItem={({item}) => <Post post={item} />}
        showsVerticalScrollIndicator={false}
        snapToInterval={Dimensions.get('window').height - 70}
        snapToAlignment={'start'}
        decelerationRate={'fast'}
        removeClippedSubviews={true}
      />
    </View>
  );
};

const ProfileScreen = () => {
  const [user, setUser] = useState([]);
  const [product, setProduct] = useState([]);
  const route = useRoute();
  const navigation = useNavigation();

  const userid = route.params.data;

  //const picture = await DataStore.query(Post, "123");
  useEffect(() => {
    DataStore.query(User, userid).then(setUser);

    const fetchProducts = async () => {
      const userProduct = (await DataStore.query(Product)).filter(
        c => c.user.id === userid,
      );
      //console.log('products', userProduct);
      setProduct(userProduct);
    };
    fetchProducts();
  }, []);

  const thumbPress = post => {
    navigation.navigate('HomeScreen', {data: post});
    console.log(post);
  };
  //console.log(product);
  return (
    <ScrollView>
      <View style={styles.container}>
        <View style={styles.profile}>
          <Image source={{uri: user.imageUri}} style={styles.profilePicture} />
          <Text>{user.username}</Text>
        </View>

        {product.map((post, index) => (
          <View style={[styles.box]} key={index}>
            <TouchableOpacity onPress={thumbPress.bind(this, post)}>
              <Image source={{uri: post.images[0]}} style={styles.thumbnail} />
            </TouchableOpacity>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

export default ProfileScreen;

const Stack = createStackNavigator();

const RootNavigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Home" component={HomeBottomTabNavigator} />
        <Stack.Screen
          options={{
            headerShown: false,
            title: 'AuthScreen',
          }}
          name="AuthScreen"
          component={AuthScreen}
        />

        <Stack.Screen
          options={{
            headerShown: true,
            title: 'Post',
          }}
          name="CreatePost"
          component={CreatePost}
        />
        <Stack.Screen
          options={{
            headerShown: true,
            title: 'Profile',
          }}
          name="ProfileScreen"
          component={ProfileScreen}
        />
        <Stack.Screen
          options={{
            headerShown: false,
            title: 'Camera',
          }}
          name="Camera"
          component={Camera}
        />
        <Stack.Screen
          options={{
            headerShown: true,
            title: 'Upload Options',
          }}
          name="UploadScreen"
          component={UploadScreen}
        />
        <Stack.Screen
          options={{
            headerShown: false,
            title: 'ProductScreen',
          }}
          name="ProductScreen"
          component={ProductScreen}
        />
       
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default RootNavigation;

const Tab = createBottomTabNavigator();

const HomeBottomTabNavigator = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        tabStyle: {
          borderStartColor: 'red',
        },
        activeTintColor: 'white',
      }}>
      <Tab.Screen
        name={'Home'}
        component={Home}
        options={{
          tabBarIcon: ({color}) => <Entypo name={'home'} size={24} />,
        }}
      />
      <Tab.Screen
        name={'Upload'}
        component={UploadScreen}
        options={{
          tabBarIcon: ({color}) => (
            <Ionicons name={'person-outline'} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name={'Search'}
        component={Home}
        options={{
          tabBarIcon: ({color}) => <AntDesign name={'search1'} size={24} />,
        }}
      />
      <Tab.Screen
        name={'Profile'}
        component={ProfileScreen}
        options={{
          tabBarIcon: ({color}) => (
            <Ionicons name={'person-outline'} size={24} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

我是 React Native 和导航库的新手。谢谢。

Answer 1

在 ProfileScreen 中，您正在立即调用您的 thumbPress 函数并且您也绑定到它，但它不是 class 组件。你应该这样做；

 <TouchableOpacity onPress={() => thumbPress(post)}>
          <Image source={{uri: post.images[0]}} style={styles.thumbnail} />
   </TouchableOpacity>

您的主屏幕名称也是“Home”，您正在路由到“HomeScreen”。

如何重用具有不同 route.params React-Navigation 的 Screen？

How to reuse Screen with different route.params React-Navigation?

reactjs

react-native

react-navigation

react-navigation-v5