无插件实现React Native一对一聊天页设计的方法及布局优化方案

原代码核心问题 #

• 语法硬错误：将Dimensions.get('window').height误写为Dimensions.get.height，会触发运行时报错；同时给每条消息气泡设置了满屏高度，直接挤压全部页面空间，两条气泡会占满全屏，没有正常排版留白
• 布局逻辑错位：消息对齐完全依赖给文字组件设置alignSelf，外层容器没有预留弹性对齐空间，长文本自动换行后会出现排版歪斜
• 缺少滚动承载区：没有适配长消息列表的可滚动容器，消息数量增加后会直接溢出屏幕，无法滑动查看
• 无动态渲染能力：所有消息都是静态写死的组件，没有状态管理逻辑支撑新消息的动态追加

功能实现思路（零第三方插件） #

• 全部使用RN核心库自带组件完成开发，不引入任何第三方聊天类库
• 用数组存储所有聊天消息，每条消息增加isSelf字段区分发送方，通过组件的alignSelf属性区分左右对齐：对方消息左对齐、自身消息右对齐
• 初始消息“hi”存在数组首位，渲染时数组从上到下依次映射为气泡，初始消息自然显示在页面最顶部；新消息追加到数组末尾时，会自动渲染在之前所有消息的下方，满足自动追加的需求
• 用RN自带的ScrollView承载消息列表，适配多消息场景的滑动查看能力

完整可运行代码 #

import { useState, useRef } from 'react'
import { 
  View, Text, ScrollView, StyleSheet, TextInput, 
  TouchableOpacity, Dimensions 
} from 'react-native'

export default function ChatPage() {
  const scrollRef = useRef(null)
  // 初始消息hi存在数组首位，位于页面最顶部
  const [messageList, setMessageList] = useState([
    { id: 'init_001', text: 'hi', isSelf: false }
  ])
  const [inputValue, setInputValue] = useState('')

  // 发送消息逻辑：生成新消息对象，追加到数组末尾实现自动追加
  const handleSend = () => {
    if (!inputValue.trim()) return
    const newMsg = {
      id: Date.now().toString(), // 生成唯一标识作为列表渲染key
      text: inputValue.trim(),
      isSelf: true
    }
    // 保留原有消息，把新消息放到数组最后
    setMessageList(prev => [...prev, newMsg])
    setInputValue('')
    // 新消息渲染完成后自动滚动到可视区域
    setTimeout(() => {
      scrollRef.current?.scrollToEnd({ animated: true })
    }, 50)
  }

  return (
    <View style={styles.pageWrapper}>
      {/* 消息滚动区，从上到下按数组顺序渲染消息 */}
      <ScrollView 
        ref={scrollRef}
        style={styles.scrollArea}
        contentContainerStyle={{ paddingVertical: 16 }}
      >
        {messageList.map(msg => (
          <View
            key={msg.id}
            style={[
              styles.bubble,
              msg.isSelf ? styles.selfBubble : styles.otherBubble
            ]}
          >
            <Text style={styles.bubbleText}>{msg.text}</Text>
          </View>
        ))}
      </ScrollView>

      {/* 底部输入栏 */}
      <View style={styles.inputBar}>
        <TextInput
          style={styles.input}
          value={inputValue}
          onChangeText={setInputValue}
          placeholder="输入聊天内容"
        />
        <TouchableOpacity style={styles.sendBtn} onPress={handleSend}>
          <Text style={styles.sendBtnText}>发送</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  pageWrapper: {
    flex: 1,
    backgroundColor: '#f2f3f5'
  },
  scrollArea: {
    flex: 1
  },
  bubble: {
    maxWidth: '75%',
    borderRadius: 6,
    paddingHorizontal: 12,
    paddingVertical: 8,
    marginVertical: 6
  },
  otherBubble: {
    alignSelf: 'flex-start',
    backgroundColor: '#ffffff',
    marginLeft: 10
  },
  selfBubble: {
    alignSelf: 'flex-end',
    backgroundColor: '#95ec69',
    marginRight: 10
  },
  bubbleText: {
    fontSize: 15,
    lineHeight: 22,
    fontFamily: 'Segoe UI'
  },
  inputBar: {
    flexDirection: 'row',
    padding: 10,
    backgroundColor: '#ffffff',
    borderTopWidth: 1,
    borderTopColor: '#e5e6eb'
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#e5e6eb',
    borderRadius: 4,
    paddingHorizontal: 10,
    marginRight: 10
  },
  sendBtn: {
    justifyContent: 'center',
    paddingHorizontal: 16,
    backgroundColor: '#12b7f5',
    borderRadius: 4
  },
  sendBtnText: {
    color: '#ffffff'
  }
})

关键实现说明 #

• 整个实现过程没有引入任何第三方插件，所有组件、API均来自React Native核心库
• 消息排序完全依托数组顺序：数组首元素对应页面最顶部的消息，后续新消息通过状态更新追加到数组末尾，自然渲染在已有消息下方，符合“初始hi在顶部、新消息自动追加在后方”的要求
• 修正了原代码的排版问题：去掉了给单条消息设置满屏高度的错误写法，把对齐逻辑从文字级别的alignSelf调整为气泡外层容器的对齐，长文本换行后排版不会出现歪斜
• 消息气泡设置maxWidth: 75%，适配长文本的自动换行，不会出现长消息撑满全页的问题
• 自动滚动逻辑通过RN自带的useRef和ScrollView的scrollToEnd方法实现，无需额外依赖

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