Как сделать текстовое сообщение кликабельным с реакции-native-gifted-chat - PullRequest
Новая
       34

Как сделать текстовое сообщение кликабельным с реакции-native-gifted-chat

1 голос
/ 04 июня 2019

Я разрабатываю мобильное приложение для чата с react-native-gifted-chat и хочу, чтобы системные сообщения были активными для выполнения функции.

Мой код ниже, но почему-то он не работает. 

import React, { Component } from 'react';
import { Image, ImageBackground, Text, Linking, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
import { Body, Container, Header, Icon, Left, Right, Thumbnail } from "native-base";
import { Button, List } from 'react-native-paper';
import { GiftedChat, Composer } from 'react-native-gifted-chat';

export default class ChatScreen extends Component {

  messages = [
    {
      _id: 1,
      text: <Text onClick={() => { alert('hello')}} style={{ color: 'red' }}>This message can not be clickable</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      system: true,
    }
  ];

  renderComposer = props => {
    return (
      <View style={{flexDirection: 'row'}}>
        <Icon type='SimpleLineIcons' name='paper-clip' style={{ fontSize: 20, justifyContent: 'center', paddingTop: 10, paddingLeft: 5 }}/>
        <Composer {...props} />
        <Button>Submit</Button>
      </View>
    );
  };

  render() {
    return (
      <Container>
        <GiftedChat
          renderComposer={this.renderComposer}
          messages={this.messages}
        />
      </Container>
    )
  }
}

});

А это скриншот моего симулятора. https://gyazo.com/bc1facffffcbe868fbce5cb15385890d

Я ожидаю, что системное сообщение «Это сообщение не может быть кликабельно» должно быть кликабельным, и при нажатии на него появляется предупреждающее сообщение «привет». Но это не работает.

Ответы [ 2 ]

1 голос
/ 05 июня 2019

Вы бы попробовали с onPress вместо onClick в текстовом компоненте?

И вы также можете сослаться на это ниже.

https://facebook.github.io/react-native/docs/text#onpress

0 голосов
/ 10 июня 2019

Текст имеет реквизиты onPress, а не onClick, поэтому вам просто нужно изменить onClick на onPress. Если вы измените это, то ваше сообщение будет выглядеть так 

messages = [
    {
      _id: 1,
      text: <Text onPress={() => { alert('hello')}} style={{ color: 'red' }}>This message can not be clickable</Text>,
      createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
      system: true,
    }
  ];

Это точно подойдет вам!

...