React Native 0.55：自带的InputAccessoryView能否动态修改高度？

你遇到的这个问题我之前也踩过坑——在RN 0.55里，直接修改InputAccessoryView的height属性确实不会生效，但像backgroundColor这类样式属性却能正常更新。这是因为这个版本的InputAccessoryView底层是原生实现的，它的高度属性没有被正确绑定到React的状态更新逻辑里，导致状态变化时原生视图没有重新计算高度。

不过别担心，有几种靠谱的方法能解决这个问题，分两种场景给你说明：

一、普通InputAccessoryView动态改高度 #

方法1：用子View间接控制高度（推荐） #

不要直接给InputAccessoryView设置height，而是在它内部包裹一个View，把动态高度设置给这个子View。InputAccessoryView会自动适应子视图的高度，因为它的默认布局是由内容撑开的。示例代码：

class CustomInputAccessory extends Component {
  state = {
    containerHeight: 50,
    bgColor: '#ffffff'
  };

  toggleHeight = () => {
    this.setState(prevState => ({
      containerHeight: prevState.containerHeight === 50 ? 200 : 50,
      bgColor: prevState.bgColor === '#ffffff' ? '#f5f5f5' : '#ffffff'
    }));
  };

  render() {
    return (
      <InputAccessoryView>
        <View 
          style={{ 
            height: this.state.containerHeight, 
            backgroundColor: this.state.bgColor,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Button title="切换高度" onPress={this.toggleHeight} />
        </View>
      </InputAccessoryView>
    );
  }
}

方法2：通过key强制重渲染 #

如果一定要直接给InputAccessoryView设置height，可以给它加一个随高度变化的key属性。当key改变时，React会卸载旧组件并重新挂载新组件，这样新的height就会生效。不过这种方式有一定性能开销，尽量优先用第一种方法：

<InputAccessoryView
  style={{ 
    height: this.state.containerHeight, 
    backgroundColor: this.state.bgColor
  }}
  key={`accessory-${this.state.containerHeight}`}
>
  <Button title="切换高度" onPress={this.toggleHeight} />
</InputAccessoryView>

二、包裹粘性TextInput的场景 #

如果是聊天输入框这类需要随输入内容动态变高的粘性TextInput，你可以通过监听TextInput的内容高度变化来同步更新容器高度：

class ChatInputBar extends Component {
  state = {
    inputHeight: 50,
    inputText: ''
  };

  handleContentSizeChange = (e) => {
    const contentHeight = e.nativeEvent.contentSize.height;
    // 限制高度范围，避免输入框过高或过矮
    const targetHeight = Math.max(50, Math.min(200, contentHeight));
    this.setState({ inputHeight: targetHeight });
  };

  render() {
    return (
      <InputAccessoryView>
        <View 
          style={{ 
            height: this.state.inputHeight,
            backgroundColor: '#f0f0f0',
            paddingHorizontal: 12,
            paddingVertical: 8
          }}
        >
          <TextInput
            multiline={true}
            style={{ flex: 1, fontSize: 16 }}
            value={this.state.inputText}
            onChangeText={text => this.setState({ inputText: text })}
            onContentSizeChange={this.handleContentSizeChange}
            placeholder="输入消息..."
          />
        </View>
      </InputAccessoryView>
    );
  }
}

这里要注意必须给TextInput设置multiline={true}，否则onContentSizeChange事件不会触发。同时让TextInput占满父View的空间（flex:1），这样它的内容高度变化会带动父View高度更新，进而让InputAccessoryView自动适应高度。

补充一句：RN 0.55确实是比较老的版本了，后续的RN版本已经修复了InputAccessoryView动态高度的问题，但如果必须停留在这个版本，上面的方法应该能解决你的问题。

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