react-native - 在 inputToolbar 下 React-native-gifted-chat 改变颜色

Question

我正在使用 react-native-gifted-chat，我很难弄清楚如何在 InputToolbar 下方着色或添加一个类似于下面第二张图片的视图。

这就是我所拥有的

这就是我想要做的

如果有人知道我如何接近第二张图像，那就太好了。如果有人可以发送指向类似示例的链接或任何帮助，我们将不胜感激。

Answer 1

renderInputToolbar只要根视图填充到底部，您就可以使用并设置根视图的高度：

import {LeftAction, ChatInput, SendButton} from 'react-native-gifted-chat'

...

minInputToolbarHeight={70}
renderInputToolbar={(props)=> (
    <View style={{ backgroundColor: COLORS.lighterblue, height: 200 }}>
        <View style={styles.inputContainer}>
            <LeftAction {...props} />
            <ChatInput {...props} />
            <SendButton {...props} />
        </View>
        <View></View>
    </View>
)}

结果：