Header Ads Widget

Ticker

6/recent/ticker-posts

Abriendo enlaces externos con Linking en React Native

 En este tutorial, veremos cómo usar LinkingReact Native para abrir enlaces externos y URL usando el navegador web predeterminado en su sistema móvil.

Después de implementar la funcionalidad del método leer más tarde AsyncStorage, veamos ahora cómo usar el Linkingmódulo en React Native para abrir una URL usando el navegador web.

Comencemos por importar Linkingen el App.jsarchivo de la siguiente manera:

import {
  Linking
} from 'react-native';

A continuación, agregue el siguiente método:

const openURL = (url) => {
  Linking.openURL(url).catch((err) => console.error('An error occurred', err));
}

Este método llama al openURL()método de Linkingpara abrir una URL en el navegador web.

Finalmente, debe llamar a este método en el ArticleItemcomponente de la siguiente manera:

const ArticleItem = ({article}) => {
  const { title, description, url, urlToImage } = article;
  return (
    <View style = { styles.articleContainer }>
      <Image style={ styles.articleImage } source= />
      <Text style= { styles.articleTitle }>
        { title }
      </Text>
      <Text style = { styles.articleDescription }>
        { description }
      </Text>
      <View style = { styles.articleBtns}>
      <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { readIcon } onPress = { () => { console.log("Button pressed!")} } title = "Open" />
      <IconButton width= "50%" color = "white" bgcolor = "#ff5c5c" icon = { bookmarkIcon } onPress = { () => { saveArticle(title, url); } } title = "Read later" />
      </View>
    </View>
  )
}

 

Al hacer clic en el botón Abrir , el artículo correspondiente se abrirá en el navegador web predeterminado en el sistema móvil.

Puede hacer más cosas con le Linkingproporciona una interfaz general para interactuar con los enlaces de aplicaciones entrantes y salientes. Puede consultar los documentos para obtener más información.

Publicar un comentario

0 Comentarios