Entrar Ainda não tem acesso?
1
resposta

Botão com link externo

Referente ao curso React Native: criando um app

por cicero jose sousa da silva
| 17k xp | 6 posts

olá No código abaixo eu tento deixar o botão de link externo contudo ele n funciona,nada acontece. Desde já agradeço!

import React, { useCallback } from 'react';
import { TouchableOpacity, StyleSheet, Linking } from 'react-native';

import Texto from './Texto';



export default function Button(texto, onPress, style) {

  //const linkExt = useCallback(() => { Linking.openURL(url) },[])
  const linkExt = useCallback(() => {
    Linking.openURL("google.com")
  }, [])


  return <>
    <TouchableOpacity style={[estilos.botao, style]} onPress={onPress}>
      <Texto style={estilos.textoBotao}></Texto>
    </TouchableOpacity>
    <TouchableOpacity onPress={linkExt}>
      <Texto>{texto}</Texto>
    </TouchableOpacity>
  </>
1 resposta
por Andre Louis Souza Ribeiro
| 150.3k xp | 212 posts
Scuba Team | Escola Semente

Fala, Cicero. tudo bem ?

Peço desculpas pela demora em te dar um retorno.

Fiz um teste aqui e pelo que estou vendo não precisamos nem utilizar o callback para conseguir abrir um link externo. Podemos fazer direto uma função mesmo que vamos acionar quando o botão for acionado. Por exemplo: 

  function linkExternal(){
    Linking.openURL('https://www.google.com');
  }

Essa função irá abrir um link externo. Ou podemos também utilizar uma arrow Function com a mesma funcionalidade. Da seguinte forma:

  const linkExt = (() => {
    Linking.openURL('https://www.google.com');
  })

Essa função também irá abrir o link do google. E um exemplo de um código completo utilizando eles seria esse :

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View , TouchableOpacity} from 'react-native';
import { Linking } from 'react-native';
import React, { useCallback} from 'react';

export default function App() {


  function linkExternal(){
    Linking.openURL('https://www.google.com');
  }

  const linkExt = (() => {
    Linking.openURL('https://www.google.com');
  })




  return (
    <TouchableOpacity onPress={linkExternal}  style={styles.container}>
      <Text>Aperte aqui para ir para o Google</Text>
      <StatusBar style="auto" />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Eu espero que tenha ajudado e qualquer dúvida estou por aqui.

Abraço e bons estudos.