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

Question

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

这是我的

这就是我想要做的

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

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>
)}

结果：

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

React-native-gifted-chat change color under inputToolbar

react-native

user-interface

react-native-gifted-chat