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

Question

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

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

底部或顶部没有间距

这是我的代码：

            <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，因为它会使我的条形变高。

Answer 1

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

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