taro+ts实现一个聊天室排版，输入框和发送按钮在最下面，点击输入框弹起软键盘，点击页面空白处，软键盘收起，自己发送的内容在页面右边，他人发送的内容在页面的左边

好的，这是一个比较典型的聊天室排版，您可以按照以下步骤实现：

1. 首先安装 Taro 和 TypeScript：

npm install -g @tarojs/cli
npm install --save-dev typescript @types/react @types/react-native

2. 创建一个新的 Taro 项目：

taro init myApp

3. 在 Taro 项目中安装需要的 UI 库，比如 Taro UI：

npm install taro-ui

4. 在页面组件中编写聊天室排版的代码，例如：

import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Input, Button } from '@tarojs/components'
import { AtMessage } from 'taro-ui'
import './index.scss'

interface Message {
  id: string,
  content: string,
  isSelf: boolean,
}

export default function Index() {
  const [inputValue, setInputValue] = useState('')
  const [messages, setMessages] = useState<Message[]>([])

  useEffect(() => {
    Taro.onKeyboardHeightChange(handleKeyboardHeightChange)
    return () => {
      Taro.offKeyboardHeightChange(handleKeyboardHeightChange)
    }
  }, [])

  const handleKeyboardHeightChange = (event: Taro.onKeyboardHeightChange.CallbackResult) => {
    // 处理键盘高度变化事件
  }

  const handleInputValueChange = (event: any) => {
    setInputValue(event.target.value)
  }

  const handleSendMessage = () => {
    if (inputValue.trim() === '') {
      Taro.atMessage({
        message: '请输入消息内容',
        type: 'warning',
      })
      return
    }
    const newMessage: Message = {
      id: `${Date.now()}`,
      content: inputValue,
      isSelf: true,
    }
    setMessages([...messages, newMessage])
    setInputValue('')
  }

  return (
    <View className="chat-room">
      <AtMessage />
      <View className="message-list">
        {messages.map(message => (
          <View key={message.id} className={`message-item ${message.isSelf ? 'self' : 'other'}`}>
            <View className="content">{message.content}</View>
          </View>
        ))}
      </View>
      <View className="input-bar">
        <Input
          className="input-field"
          type="text"
          value={inputValue}
          placeholder="请输入消息内容"
          onInput={handleInputValueChange}
        />
        <Button className="send-button" onClick={handleSendMessage}>发送</Button>
      </View>
    </View>
  )
}

5. 在样式文件中定义聊天室排版的样式，例如：

.chat-room {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.message-list {
  flex: 1;
  overflow-y: scroll;
}

.message-item {
  margin: 10px;
  max-width: 80%;
  padding: 10px;
  border-radius: 5px;
}

.self {
  align-self: flex-end;
  background-color: #87CEFA;
}

.other {
  align-self: flex-start;
  background-color: #F0E68C;
}

.input-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  background-color: #F5F5F5;
}

.input-field {
  flex: 1;
  margin-right: 10px;
}

.send-button {
  width: 80px;
}

这样就完成了一个简单的聊天室排版的实现，其中包括了输入框和发送按钮在最下面，点击输入框弹起软键盘，点击页面空白处软键盘收起，自己发送的内容在页面右边，他人发送的内容在页面左边等功能。当然，具体实现还需要根据实际需求进行调整。