时间戳

首页 > 解决方案 > 在 react native 天才聊天中，哪些道具用于在工具栏中添加图像和相机等额外功能？我如何实现它？

react-native - 在 react native 天才聊天中，哪些道具用于在工具栏中添加图像和相机等额外功能？我如何实现它？

问题描述

我是新来的反应原生天才聊天。我尝试在聊天工具栏中添加相机、图库等功能。我通读了道具。我认为它要么是renderInputToolbar 要么是renderComposer。但是该网站没有任何关于如何使用其道具的描述。它只是说明什么是 for 以及您可以通过什么类型。

有人可以解释一下如何使用这些道具吗？非常感谢！

标签： react-nativereact-native-gifted-chat

解决方案

我添加了带有发送按钮的相机按钮，如下所示：

<GiftedChat
  ...
  textInputStyle={styles.composer}
  minComposerHeight={40}
  minInputToolbarHeight={60}
  renderSend={(props) => (
    <View style={{ flexDirection: 'row', alignItems: 'center', height: 60 }}>
      <BtnRound icon="camera" iconColor={Colors.primaryBlue} size={40} style={{ marginHorizontal: 5 }} onPress={() => this.choosePicture()} />
      <Send {...props}>
        <View style={styles.btnSend}>
          <Icon name="ios-send" size={24} color="#ffffff" />
        </View>
      </Send>
    </View>
  )}
  ...
/>

风格

composer:{
  borderRadius: 25, 
  borderWidth: 0.5,
  borderColor: '#dddddd',
  marginTop: 10,
  marginBottom: 10,
  paddingLeft: 10,
  paddingTop: 5,
  paddingBottom: 5,
  paddingRight: 10,
  fontSize: 16
},
btnSend: {
  height: 40,
  width: 40,
  alignItems: 'center',
  justifyContent: 'center',
  marginRight: 10,
  backgroundColor: Colors.primary,
  ...getShadow(),
  borderRadius: 50
}

BtnRound是一个简单的自定义TouchableOpacity按钮，它使用提供的图标呈现圆形按钮。BtnRound 代码在这里。

推荐阅读