React Native Expo如何在底部导航栏上方实现输入组件布局

你需要实现的是固定在底部导航栏上方的悬浮输入组件，可按以下步骤开发：

• 外层容器定位：页面根容器设置position: 'relative'，输入组件外层设置position: 'absolute'，bottom属性值等于底部导航栏的高度，左右设置12-16px的边距，zIndex设置为高于底部导航栏的数值，保证组件不会被下层内容遮挡。
• 内部布局：输入组件内部用flexDirection: 'row'实现横向排列，左侧TextInput设置flex:1占满剩余宽度，右侧放置功能按钮。如果需要支持多行输入，给TextInput加multiline={true}和maxHeight属性，限制输入框的最高高度，内容超出后自动滚动。
• 键盘适配：使用React Native自带的KeyboardAvoidingView包裹输入组件，适配iOS和安卓端键盘弹出时的位移，避免输入框被键盘遮挡。
• 悬浮效果：给输入组件容器加阴影属性，iOS用shadow系列属性，安卓用elevation属性，实现参考图里的悬浮层次感。

import { View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, Platform } from 'react-native';

// 替换为你的实际底部导航栏高度
const BOTTOM_TAB_HEIGHT = 60;

const FloatingInput = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={BOTTOM_TAB_HEIGHT}
      style={{ 
        position: 'absolute', 
        bottom: BOTTOM_TAB_HEIGHT, 
        left: 16, 
        right: 16, 
        zIndex: 999 
      }}
    >
      <View style={{ 
        flexDirection: 'row', 
        gap: 12, 
        alignItems: 'flex-end', 
        backgroundColor: '#fff', 
        padding: 12, 
        borderRadius: 16, 
        shadowColor: '#000', 
        shadowOffset: { width: 0, height: 2 }, 
        shadowOpacity: 0.1, 
        shadowRadius: 8, 
        elevation: 5 
      }}>
        <TextInput
          style={{ 
            flex: 1, 
            paddingVertical: 8, 
            paddingHorizontal: 12, 
            backgroundColor: '#f5f5f5', 
            borderRadius: 12, 
            maxHeight: 120 
          }}
          placeholder="请输入内容"
          multiline
        />
        <TouchableOpacity style={{ 
          width: 40, 
          height: 40, 
          borderRadius: 12, 
          backgroundColor: '#2196F3', 
          justifyContent: 'center', 
          alignItems: 'center' 
        }}>
          <Text style={{ color: '#fff', fontWeight: 'bold' }}>发</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  )
}

• 先熟练掌握React Native核心样式规则，重点攻克Flex布局、定位属性、平台适配相关的API用法。
• 优先啃官方文档的基础组件示例，重点掌握View、TextInput、Touchable系列组件、键盘适配相关组件的使用方法。
• 入门阶段可以从仿写常见UI组件入手，比如按钮、输入框、列表这些高频组件，逐步加深对样式规则和组件特性的理解。

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