React Native中如何让获焦的TextInput居中？解决输入框消失问题

我帮你分析了下当前的代码，TextInput点击后消失的问题主要源于noteBody的绝对定位设置——它脱离了正常文档流，和mainPage的justifyContent: 'center'布局产生了冲突。同时要实现获焦输入框居中的效果，我们可以通过调整布局结构+监听输入框焦点状态来完成，具体方案如下：

1. 核心问题分析 #

• noteBody使用了position: absolute并设置top/bottom/left/right: 0，让它完全覆盖父容器，和mainPage的居中布局逻辑冲突，导致获焦时输入框渲染异常。
• 当前布局没有针对焦点变化做动态调整，无法实现获焦输入框居中的需求。

2. 解决方案步骤 #

步骤1：重构布局结构 #

用ScrollView包裹所有TextInput，既解决输入框超出屏幕的问题，也能通过滚动实现获焦输入框居中的效果，同时移除noteBody的绝对定位。

步骤2：监听焦点状态 #

给每个TextInput添加onFocus和onBlur事件，记录当前获焦的输入框引用，调用ScrollView的scrollTo方法将其滚动到屏幕居中位置。

步骤3：调整样式 #

移除导致布局冲突的绝对定位属性，优化容器和输入框的样式设置。

3. 修改后的完整代码 #

组件部分 #

import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView, Dimensions } from 'react-native';

class NewNote extends Component {
  constructor(props) {
    super(props);
    this.state = {
      noteTitle: '',
      callType: '',
      noteText: '',
      focusedInput: null // 记录当前获焦的输入框
    };
    // 创建输入框引用
    this.subjectInput = React.createRef();
    this.calltypeInput = React.createRef();
    this.textInput = React.createRef();
  }

  // 处理输入框获焦，滚动到居中位置
  handleInputFocus = (ref) => {
    this.setState({ focusedInput: ref }, () => {
      ref.current.measureInWindow((x, y) => {
        const windowHeight = Dimensions.get('window').height;
        // 计算滚动距离，让输入框垂直居中
        const scrollY = y - (windowHeight / 2) + 60;
        this.scrollView.scrollTo({ y: scrollY, animated: true });
      });
    });
  };

  // 处理输入框失焦
  handleInputBlur = () => {
    this.setState({ focusedInput: null });
  };

  addNote = () => {
    // 你的保存逻辑
    console.log('Note saved:', this.state);
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header1}>
          <Text style={styles.title}>New Note</Text>
        </View>
        <View style={styles.headerDesign}></View>
        <View style={styles.header2}></View>
        <View style={styles.mainPage}>
          <ScrollView 
            ref={(ref) => { this.scrollView = ref; }}
            contentContainerStyle={styles.noteBody}
            keyboardShouldPersistTaps="handled"
          >
            <TextInput
              ref={this.subjectInput}
              style={styles.subject}
              placeholder='Raport Number/Note Indentifier'
              onChangeText={(noteTitle) => this.setState({ noteTitle })}
              value={this.state.noteTitle}
              placeholderTextColor='grey'
              underlineColorAndroid='transparent'
              onFocus={() => this.handleInputFocus(this.subjectInput)}
              onBlur={this.handleInputBlur}
            />
            <TextInput
              ref={this.calltypeInput}
              style={styles.calltype}
              multiline={true}
              numberOfLines={5}
              placeholder='Call Type/Other Information'
              onChangeText={(callType) => this.setState({ callType })}
              value={this.state.callType}
              placeholderTextColor='grey'
              underlineColorAndroid='transparent'
              onFocus={() => this.handleInputFocus(this.calltypeInput)}
              onBlur={this.handleInputBlur}
            />
            <TextInput
              ref={this.textInput}
              multiline={true}
              numberOfLines={9}
              style={styles.textInput}
              placeholder='Write your note here'
              onChangeText={(noteText) => this.setState({ noteText })}
              value={this.state.noteText}
              placeholderTextColor='grey'
              underlineColorAndroid='transparent'
              onFocus={() => this.handleInputFocus(this.textInput)}
              onBlur={this.handleInputBlur}
            />
          </ScrollView>
          <TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
            <Text style={styles.addButtonText}>SAVE</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

样式部分 #

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mainPage: {
    flex: 1, // 占满剩余空间
    position: 'relative'
  },
  header1: {
    backgroundColor: '#000',
    alignItems: 'center',
    height: 40,
    justifyContent: 'center',
  },
  title: {
    color: '#fff',
    fontSize: 20,
  },
  header2: {
    backgroundColor: '#000',
    alignItems: 'center',
    height: 40,
    justifyContent: 'center',
  },
  headerDesign: {
    backgroundColor: '#0000FF',
    alignItems: 'center',
    height: 20,
    justifyContent: 'center',
  },
  noteBody: {
    flexGrow: 1,
    paddingHorizontal: 10,
    paddingTop: 20,
    paddingBottom: 100 // 给底部按钮留出空间
  },
  textInput: {
    textAlignVertical: 'top',
    backgroundColor: '#fff',
    color: '#000',
    padding: 20,
    borderTopWidth: 1,
    borderTopColor: '#000',
    borderBottomWidth: 1,
    borderBottomColor: '#000',
    marginBottom: 10
  },
  addButton: {
    position: 'absolute',
    zIndex: 11,
    bottom: 20,
    alignSelf: 'center', // 按钮水平居中
    width: 200,
    backgroundColor: '#0000FF',
    height: 40,
    elevation: 8,
    alignItems: 'center',
    justifyContent: 'center'
  },
  addButtonText: {
    color: '#fff',
    fontSize: 20,
  },
  subject: {
    textAlignVertical: 'top',
    backgroundColor: '#fff',
    padding: 20,
    borderTopWidth: 1,
    borderTopColor: '#000',
    borderBottomWidth: 1,
    borderBottomColor: '#000',
    marginBottom: 10
  },
  calltype: {
    textAlignVertical: 'top',
    backgroundColor: '#fff',
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#000',
    marginBottom: 10
  }
});

4. 关键修改说明 #

• 移除了noteBody的绝对定位，改用ScrollView的contentContainerStyle布局，彻底解决输入框消失的问题。
• 添加输入框引用和焦点监听，通过measureInWindow获取位置，计算滚动距离实现获焦输入框居中。
• 调整mainPage的flex值和按钮对齐方式，优化整体布局合理性。
• 给输入框添加marginBottom，提升视觉层次感。

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