React Native聊天功能需求：点击气泡唤入底部画廊及全屏查看

你用image picker和crop picker完全搞错方向了——这俩是用来选择本地图片的工具，而你的需求是展示聊天中的图片画廊，直接用React Native自带的动画和组件就能实现，具体步骤如下：

一、滑入画廊的动画实现 #

用Animated API做两侧滑入效果，初始让左右两个容器分别在屏幕外，点击气泡后动画移动到屏幕内：

import React, { useState, useRef, useEffect } from 'react';
import { View, Animated, TouchableOpacity, Image, Text, Dimensions, ScrollView, StyleSheet } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

// 滑入画廊组件
const ChatImageGallery = ({ visible, images, onFullscreenTap }) => {
  const leftSlideAnim = useRef(new Animated.Value(-SCREEN_WIDTH)).current;
  const rightSlideAnim = useRef(new Animated.Value(SCREEN_WIDTH)).current;

  // 根据visible状态触发动画
  useEffect(() => {
    const animConfig = { duration: 300, useNativeDriver: true };
    if (visible) {
      Animated.parallel([
        Animated.timing(leftSlideAnim, { ...animConfig, toValue: 0 }),
        Animated.timing(rightSlideAnim, { ...animConfig, toValue: 0 }),
      ]).start();
    } else {
      Animated.parallel([
        Animated.timing(leftSlideAnim, { ...animConfig, toValue: -SCREEN_WIDTH }),
        Animated.timing(rightSlideAnim, { ...animConfig, toValue: SCREEN_WIDTH }),
      ]).start();
    }
  }, [visible]);

  if (!visible) return null;

  return (
    <View style={styles.galleryContainer}>
      {/* 左侧滑入容器 */}
      <Animated.View style={[styles.leftPanel, { transform: [{ translateX: leftSlideAnim }] }]}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.imageScroll}>
          {images.slice(0, Math.ceil(images.length/2)).map((img, idx) => (
            <TouchableOpacity key={idx} style={styles.imageItem}>
              <Image source={{ uri: img }} style={styles.thumbnail} />
            </TouchableOpacity>
          ))}
        </ScrollView>
      </Animated.View>

      {/* 右侧滑入容器（带全屏按钮） */}
      <Animated.View style={[styles.rightPanel, { transform: [{ translateX: rightSlideAnim }] }]}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>图片画廊</Text>
          <TouchableOpacity onPress={onFullscreenTap} style={styles.fullscreenBtn}>
            <Text style={styles.fullscreenText}>View Fullscreen</Text>
          </TouchableOpacity>
        </View>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.imageScroll}>
          {images.slice(Math.ceil(images.length/2)).map((img, idx) => (
            <TouchableOpacity key={idx} style={styles.imageItem}>
              <Image source={{ uri: img }} style={styles.thumbnail} />
            </TouchableOpacity>
          ))}
        </ScrollView>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  galleryContainer: {
    position: 'absolute',
    bottom: 60, // 调整到文本输入框上方
    left: 0,
    right: 0,
    height: 120,
  },
  leftPanel: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: SCREEN_WIDTH / 2,
    backgroundColor: '#f5f5f5',
    borderTopLeftRadius: 12,
    borderBottomLeftRadius: 12,
    padding: 10,
  },
  rightPanel: {
    position: 'absolute',
    right: 0,
    top: 0,
    bottom: 0,
    width: SCREEN_WIDTH / 2,
    backgroundColor: '#f5f5f5',
    borderTopRightRadius: 12,
    borderBottomRightRadius: 12,
    padding: 10,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  headerTitle: {
    fontSize: 14,
    fontWeight: '500',
  },
  fullscreenBtn: {
    paddingHorizontal: 4,
  },
  fullscreenText: {
    color: '#007AFF',
    fontSize: 14,
  },
  imageScroll: {
    flex: 1,
  },
  imageItem: {
    marginRight: 8,
  },
  thumbnail: {
    width: 80,
    height: 80,
    borderRadius: 8,
  },
});

二、全屏画廊实现 #

用Modal组件做全屏覆盖，搭配swiper库实现图片滑动切换（也可以自己用ScrollView的pagingEnabled实现）：

import React from 'react';
import { View, Modal, Image, TouchableOpacity, Text, Dimensions, StyleSheet } from 'react-native';
import Swiper from 'react-native-swiper'; // 先执行 npm install react-native-swiper

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

const FullscreenGallery = ({ visible, images, onClose }) => {
  return (
    <Modal visible={visible} transparent={false} animationType="fade">
      <View style={styles.fullscreenContainer}>
        {/* 关闭按钮 */}
        <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
          <Text style={styles.closeText}>×</Text>
        </TouchableOpacity>
        {/* 图片滑动容器 */}
        <Swiper loop={false} showsPagination={true} paginationStyle={styles.pagination}>
          {images.map((img, idx) => (
            <View key={idx} style={styles.imageWrapper}>
              <Image 
                source={{ uri: img }} 
                style={styles.fullscreenImage} 
                resizeMode="contain"
              />
            </View>
          ))}
        </Swiper>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  fullscreenContainer: {
    flex: 1,
    backgroundColor: 'black',
  },
  closeBtn: {
    position: 'absolute',
    top: 40,
    right: 20,
    zIndex: 100,
    width: 30,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  closeText: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  imageWrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fullscreenImage: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.8,
  },
  pagination: {
    bottom: 40,
  },
});

三、在聊天页面整合 #

把两个组件和聊天页面的逻辑绑定：

import React, { useState } from 'react';
import { View, FlatList, TouchableOpacity, Text, TextInput, StyleSheet } from 'react-native';

const ChatScreen = () => {
  const [isGalleryVisible, setGalleryVisible] = useState(false);
  const [isFullscreenVisible, setFullscreenVisible] = useState(false);
  // 模拟聊天中的图片列表，实际从聊天消息中提取
  const chatImages = [
    'https://example.com/img1.jpg',
    'https://example.com/img2.jpg',
    'https://example.com/img3.jpg',
    'https://example.com/img4.jpg',
  ];

  // 模拟聊天消息
  const chatMessages = [
    { id: '1', text: '这是一条带图片的消息', hasImages: true, isMe: false },
    { id: '2', text: '我也发张图', hasImages: true, isMe: true },
  ];

  return (
    <View style={styles.screenContainer}>
      {/* 聊天消息列表 */}
      <FlatList
        data={chatMessages}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity 
            onPress={() => setGalleryVisible(true)}
            style={item.isMe ? styles.myBubble : styles.otherBubble}
          >
            <Text style={item.isMe ? styles.myText : styles.otherText}>{item.text}</Text>
            {item.hasImages && <Text style={styles.imageHint}>点击查看图片</Text>}
          </TouchableOpacity>
        )}
      />

      {/* 文本输入框 */}
      <View style={styles.inputContainer}>
        <TextInput style={styles.input} placeholder="输入消息..." />
        <TouchableOpacity style={styles.sendBtn}>
          <Text style={styles.sendText}>发送</Text>
        </TouchableOpacity>
      </View>

      {/* 滑入画廊 */}
      <ChatImageGallery 
        visible={isGalleryVisible} 
        images={chatImages} 
        onFullscreenTap={() => setFullscreenVisible(true)} 
      />

      {/* 全屏画廊 */}
      <FullscreenGallery 
        visible={isFullscreenVisible} 
        images={chatImages} 
        onClose={() => setFullscreenVisible(false)} 
      />
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    backgroundColor: '#fff',
  },
  myBubble: {
    alignSelf: 'flex-end',
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 16,
    margin: 8,
    maxWidth: '80%',
  },
  otherBubble: {
    alignSelf: 'flex-start',
    backgroundColor: '#e5e5ea',
    padding: 12,
    borderRadius: 16,
    margin: 8,
    maxWidth: '80%',
  },
  myText: {
    color: 'white',
  },
  otherText: {
    color: 'black',
  },
  imageHint: {
    color: '#666',
    fontSize: 12,
    marginTop: 4,
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 8,
    borderTopWidth: 1,
    borderTopColor: '#e5e5ea',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#e5e5ea',
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  sendBtn: {
    marginLeft: 8,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  sendText: {
    color: '#007AFF',
    fontWeight: '500',
  },
});

四、额外优化点 #

• 给画廊外层添加透明遮罩，点击空白处即可关闭画廊
• 全屏视图支持双击放大/缩小图片，用Animated实现缩放动画
• 根据图片数量自动调整左右面板的图片分布，避免出现空面板

内容的提问来源于stack exchange，提问作者YuBin