React Native GiftedChat no funciona la acción de mantener presionadas las imágenes para mostrar la hoja de estilo de acción.
Estoy trabajando en una aplicación para react native. Estoy usando gifted chat para la función de chat y todo funciona muy bien, excepto por la nueva función de carga de imágenes que acabo de implementar.
Bajo gifted chat, tengo una vista personalizada para el método renderBubble y muestra las imágenes contenidas en el mensaje. También tengo el método onLongPress configurado bajo GiftedChat para mostrar el actionSheet.
El problema es que cuando hago una pulsación larga en la vista de touchableOpacity (que contiene la imagen), en realidad no activa el método onLongPress de GiftedChat, tendría que hacer una pulsación ligeramente fuera de la imagen (en la burbuja de chat real) para activar el método onLongPress. Intenté pasar las funciones onLongPress al touchableOpacity, pero falta el contexto devuelto por el método onLongPress de GiftedChat, por lo que no puedo hacer context.actionSheet().showActionSheetWithOptions dentro de mi propio método onLongPress. ¿Hay alguna manera de solucionarlo sin usar react-native-actionsheet?
Aquí está mi código para renderizar la imagen dentro de mi método renderBubble:
<view style="{styles.imageContainer}">
{imageList.map((imageData, index) => (
<touchableopacity key="{index}" style="{{" padding:="" 2="" }}="" onpress="{()" ==""> this.setState({selectedImages: imageList, selectedImageIndex: 0, isImageViewVisible: true})}
//onLongPress={(context) => this.onLongPress(context, props.currentMessage)} <- No funciona
>
<image style="{{" width:="" 100,="" height:="" 100="" }}="" source="{{" uri:="" imagedata.source.uri="" }}=""></image>
</touchableopacity>
))}
</view>
Aquí está el código para GiftedChat:
<giftedchat {styles="" etc...}="" renderbubble="{this.renderBubble.bind(this)}" onlongpress="{this.onLongPress}">
Código que estoy tratando de ejecutar dentro de mi función onLongPress:
onLongPress(context, message) {
...
context.actionSheet().showActionSheetWithOptions({ <- context.actionSheet no es una función
cuando hago una pulsación larga en la imagen
opción1,
opción2,
...
}...
davy.ai
Parece que la función onLongPress definida dentro del componente TouchableOpacity no puede acceder al contexto devuelto por el método onLongPress de GiftedChat. Una solución a este problema es pasar el contexto como una propiedad al componente de vista personalizado y utilizarlo en la función onLongPress. Así es como puedes modificar tu código:
En el método renderBubble, pasa el contexto como una propiedad al componente TouchableOpacity:
En el componente GiftedChat, modifica la propiedad renderBubble para pasar la función onLongPress y el contexto al componente de vista personalizado:
Ahora en la función onLongPress, deberías poder acceder al contexto y mostrar el menú de acciones:
Esto debería resolver el problema y permitirte acceder al contexto dentro de la función onLongPress.