【问题标题】:How To Auto Resize React Native Gifted Chat Input?如何自动调整 React Native Gifted Chat 输入的大小?
【发布时间】:2020-06-23 03:59:37
【问题描述】:

我使用 React Native Gifted Chat 并且遇到问题,当文本输入超过两行或用户使用 enter 时,TextInput 不会自动调整大小。如下图:

这是我的代码:

  <GiftedChat
            placeholder={'Type Here'}
            messages={this.state.messages}
            onSend={messages => {
              this.onSend(messages)
              this._sendChatMessage(messages[0].text)

            }}
            user={{
              _id: 'CUSTOMER',
            }}
            maxComposerHeight={200}
            scrollToBottom
            alignTop
            // minInputToolbarHeight={200}
            // maxInputLength={200}
            renderSend={this.renderSend}
            renderBubble={this.renderBubble}
            renderInputToolbar={this.state.isFinishOrder ? this.renderInputToolbarFinish : this.renderInputToolbar}
            renderAvatar={null}
            renderDay={null}
            renderTime={this.renderTime}
            renderFooter={this.renderFooter}
            isCustomViewBottom={true}

我希望 React Native Gifted Chat 上的 TextInput 自动调整大小。请帮忙。谢谢。

【问题讨论】:

    标签: android reactjs react-native react-native-gifted-chat


    【解决方案1】:

    您并没有真正显示您在 renderInputToolbar 中调用的函数。所以我只能做假设。如果我的回答没有涵盖你,请使用包含的 this.renderInputToolbar 更新你的帖子。

    默认情况下,textInput 使用 autoResize,所以我只能假设您忘记在输入中传递道具:

    ///Pass props
    renderInputToolbar = (props) => {
    
            return ( 
                     <InputToolbar 
                        {...props} 
           //Add the extra styles via containerStyle here
           //Add any other option you want to pass like placeholder
                     />;
           );
        }
    

    【讨论】:

    • 这是我的渲染工具栏
    • . /** * * @param {JSX} props * this for toolbar send */ renderInputToolbar(props) { return ( &lt;InputToolbar {...props} alwaysShowSend={true} containerStyle={styles.containerInputToolbar} &gt; &lt;/InputToolbar&gt; ) }
    • 你能给我一个例子或链接,因为我已经自定义了吗?