自定义文本输入框，如何添加边距

问题描述

我正在尝试使输入栏看起来像这样：

但是我无法正确放置它。我也不能摆脱线/分隔线。现在，它看起来像这样：

底部或顶部没有空格

这是我的代码：

            <GiftedChat
                messages={messages}
                onSend={newMessage => handleSend(newMessage)}
                user={{ _id: 1 }} // ideally this would be the current user id
                renderSystemMessage={customSystemMessage}
                renderBubble={renderBubble}
                renderInputToolbar={noinput ? () => (<View style = {{flex:1,backgroundColor: 'white'}}></View>) : (props) => renderInputToolbar(props)}
                renderSend = {renderSend}
                renderTime = {()=><View></View>}
                renderAvatar={() => null}
                placeholder='Write a message'
                alwaysShowSend
                inverted
            />
function renderInputToolbar(props) {
    return (
        <InputToolbar {...props} containerStyle={styles.input} />
    );
}
input: {
        borderRadius: 30,backgroundColor: colorScheme.lightteal,marginLeft: 15,marginRight: 15,}

我似乎无法添加marginTop，因为它会使我的酒吧变得越来越高。

解决方法

我相信您想使用自定义的renderInputToolbar：

...
renderInputToolbar={noinput ? () => (<View style={{flex:1,backgroundColor: 'white'}}></View>) : (props) => (
<InputToolbar
  renderActions={() => renderActions(props}
  renderComposer={() => renderComposer(props)}
  renderSend={() => renderSend(props)}
  containerStyle={{ ...containerStylesGoHere }}
/>
)}