实战：社交应用

功能需求与技术选型

我们要构建一个微型社交应用，核心功能包括：用户登录（JWT + 刷新 Token）、发帖（文字 + 图片，相机或相册选取）、Feed 流（无限滚动）、点赞（乐观更新）、推送通知（新粉丝/新点赞）、点击通知跳转到对应帖子（深度链接）、图片全屏预览（共享元素动画）。

核心名词解释

完整应用架构

Feed 无限滚动实现

无限滚动是 Feed 流应用的核心技术点。使用游标分页（Cursor-based Pagination）而非页码分页，可以避免数据插入/删除导致的重复或跳过问题。

// hooks/useFeed.ts — 无限滚动 Hook
import { useInfiniteQuery } from '@tanstack/react-query';
import { api } from '../lib/api';

interface FeedResponse {
  posts: Post[];
  nextCursor: string | null;
  hasMore: boolean;
}

export function useFeed() {
  return useInfiniteQuery<FeedResponse>({
    queryKey: ['feed'],
    queryFn: ({ pageParam }) =>
      api.get(`/feed?cursor=${pageParam ?? ''}&limit=20`),
    initialPageParam: undefined,
    // getNextPageParam：从当前页数据中提取下一页的游标
    getNextPageParam: (lastPage) =>
      lastPage.hasMore ? lastPage.nextCursor : undefined,
    staleTime: 2 * 60 * 1000,
  });
}

// screens/FeedScreen.tsx
import { FlatList, ActivityIndicator } from 'react-native';
import { useFeed } from '../hooks/useFeed';

export function FeedScreen() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    refetch,
  } = useFeed();

  // 将多页数据展平为单一数组
  const posts = data?.pages.flatMap(page => page.posts) ?? [];

  return (
    <FlatList
      data={posts}
      renderItem={({ item }) => <PostCard post={item} />}
      keyExtractor={post => post.id}
      // 滚动到距离底部 200px 时触发加载下一页
      onEndReached={() => hasNextPage && fetchNextPage()}
      onEndReachedThreshold={0.3}
      // 列表底部的加载指示器
      ListFooterComponent={
        isFetchingNextPage
          ? <ActivityIndicator color="#38bdf8" style={{ padding: 20 }} />
          : null
      }
      // 下拉刷新
      onRefresh={refetch}
      refreshing={isLoading}
    />
  );
}

相机上传完整流程

// screens/CreatePostScreen.tsx — 发帖功能
import * as ImagePicker from 'expo-image-picker';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Image } from 'expo-image';
import { useState } from 'react';

export function CreatePostScreen() {
  const [text, setText] = useState('');
  const [imageUri, setImageUri] = useState<string | null>(null);
  const queryClient = useQueryClient();

  const { mutate: createPost, isPending } = useMutation({
    mutationFn: async () => {
      let imageUrl: string | undefined;

      if (imageUri) {
        // 1. 获取预签名 URL
        const { uploadUrl, publicUrl } = await api.post('/upload/presign', {
          contentType: 'image/jpeg',
        });
        // 2. 上传图片到 S3
        const blob = await (await fetch(imageUri)).blob();
        await fetch(uploadUrl, { method: 'PUT', body: blob });
        imageUrl = publicUrl;
      }

      // 3. 创建帖子
      return api.post('/posts', { text, imageUrl });
    },
    onSuccess: () => {
      // 4. 刷新 Feed（让新帖子出现在顶部）
      queryClient.invalidateQueries({ queryKey: ['feed'] });
      setText('');
      setImageUri(null);
      router.back(); // 发布成功后返回 Feed
    },
  });

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 0.8,
      allowsEditing: true,
      aspect: [4, 3],
    });
    if (!result.canceled) setImageUri(result.assets[0].uri);
  };

  return (
    <View style={styles.container}>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="分享你的想法..."
        multiline
        style={styles.input}
      />
      {imageUri && (
        <Image source={{ uri: imageUri }} style={styles.preview} />
      )}
      <View style={styles.actions}>
        <Pressable onPress={pickImage}>
          <Text>📷 选择图片</Text>
        </Pressable>
        <Pressable
          onPress={() => createPost()}
          disabled={isPending || !text.trim()}
          style={[styles.submit, isPending && styles.disabled]}
        >
          <Text>{isPending ? '发布中...' : '发布'}</Text>
        </Pressable>
      </View>
    </View>
  );
}

共享元素动画：图片全屏预览

import Animated, {
  useSharedValue, withSpring,
  useAnimatedStyle
} from 'react-native-reanimated';
import { Modal, Pressable } from 'react-native';

export function PostImage({ uri, width, height }: PostImageProps) {
  const [fullscreen, setFullscreen] = useState(false);
  const scale = useSharedValue(1);
  const opacity = useSharedValue(1);

  const open = () => {
    setFullscreen(true);
    scale.value = withSpring(1, { damping: 20 });
    opacity.value = withSpring(1);
  };

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: opacity.value,
  }));

  return (
    <>
      <Pressable onPress={open}>
        <Animated.Image
          source={{ uri }}
          style={[{ width, height }, animatedStyle]}
          // Reanimated Shared Transition 标签（需 RN 0.73+）
          sharedTransitionTag={`image-${uri}`}
        />
      </Pressable>

      <Modal visible={fullscreen} transparent animationType="none">
        <Pressable
          style={styles.overlay}
          onPress={() => setFullscreen(false)}
        >
          <Animated.Image
            source={{ uri }}
            style={styles.fullscreenImage}
            sharedTransitionTag={`image-${uri}`}  // 相同 tag，触发共享元素动画
            resizeMode="contain"
          />
        </Pressable>
      </Modal>
    </>
  );
}