ডিফল্ট ওয়েব ব্রাউজারে url খুলুন

Question

আমি নতুন প্রতিক্রিয়া-নেটিভ এবং আমি খুলতে চান URL মধ্যে Android এবং iPhone Chrome এর মত ডিফল্ট ব্রাউজার উভয়।

আমি অর্জন করতে চাই এমন কার্যকারিতার মতো অ্যান্ড্রয়েডের অভিপ্রায় মাধ্যমে url খুলি।

আমি অনেকবার অনুসন্ধান করেছি তবে এটি আমাকে ডিপলিংকের ফলাফল দেবে ।

Answer 1

আপনার ব্যবহার করা উচিত Linking।

দস্তাবেজ থেকে উদাহরণ:

class OpenURLButton extends React.Component {
  static propTypes = { url: React.PropTypes.string };
  handleClick = () => {
    Linking.canOpenURL(this.props.url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log("Don't know how to open URI: " + this.props.url);
      }
    });
  };
  render() {
    return (
      <TouchableOpacity onPress={this.handleClick}>
        {" "}
        <View style={styles.button}>
          {" "}<Text style={styles.text}>Open {this.props.url}</Text>{" "}
        </View>
        {" "}
      </TouchableOpacity>
    );
  }
}

এক্সপো স্নাকের চেষ্টা করতে পারেন এমন একটি উদাহরণ এখানে :

import React, { Component } from 'react';
import { View, StyleSheet, Button, Linking } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Button title="Click me" onPress={ ()=>{ Linking.openURL('https://google.com')}} />
      </View>
    );
  }
}

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

Comments

@ রাজকুমারন, যদি আপনার কাছে একটি অ্যাপ থাকে যা খবরের নিবন্ধগুলি ধরে ফেলে এবং আপনি যদি একটি পৃথক ব্রাউজারে সংবাদ নিবন্ধের হাইপারলিঙ্কগুলি খুলতে চান তবে এটি কীভাবে কাজ করবে?

— ড্যানিয়েল

এটি দেখুন, facebook.github.io/react-native/docs/… । এটি @ ড্যানিয়েল

— রাজ কুমার এন

@ রাজকুমারন ব্রাউজারে পুনর্নির্দেশ না করে আমরা কীভাবে অ্যাপের অভ্যন্তরে বাহ্যিক URL খুলতে পারি?

— LazyCoder

Answer 2

একটি সহজ উপায় যা অ্যাপ্লিকেশনটি ইউআরএলটি খুলতে পারে কিনা তা পরীক্ষা করে elim

  loadInBrowser = () => {
    Linking.openURL(this.state.url).catch(err => console.error("Couldn't load page", err));
  };

একটি বোতাম দিয়ে এটি কল।

<Button title="Open in Browser" onPress={this.loadInBrowser} />

Comments

আমি নাল মানগুলি কীভাবে পরিচালনা করব? ধরা যাক আমি ব্যাকএন্ড থেকে URL পেয়েছি তবে এটি স্ট্রিংয়ের পরিবর্তে বাতিল হয়ে গেছে, অ্যাপটি ক্রাশ হচ্ছে।

— এএসএন

@ এএসএন আপনি যে ইউআরএলটি openURLপদ্ধতিতে পাস করার আগে তা পরীক্ষা করে দেখুন । উদাহরণস্বরূপ: If (this.state.url) Linking.openURL(this.state.url)। আপনি যদি আগে পরীক্ষা করতে না চান তবে আপনি ক্যাচ ক্লজটি ব্যবহার করতে পারেন।

— ক্লাচচার

হ্যাঁ এটাই আমি এটি পরিচালনা করেছি। আপনাকে ধন্যবাদ :)

— এএসএন

ওহে! কেবলমাত্র একটি প্রশ্ন, যদি অ্যাপ্লিকেশনটি ডিফল্টরূপে খোলার জন্য নির্বাচিত হয় এবং ব্রাউজারে আমার একই লিঙ্কটি খুলতে হবে তবে আপনি অ্যান্ড্রয়েডের জন্য কী করার পরামর্শ দিচ্ছেন?

— Andriy Khlopyk

সহজ, সংক্ষিপ্ত, দরকারী সমাধান, আমি ব্রাউজার থেকে অ্যাপ্লিকেশনটিতে ম্যানুয়ালি ফিরে আসার সময় ফাঁকা স্ক্রিন দেখায় এ সম্পর্কে মন্তব্য করতে পারেন।

— গণেশদেশমুখ

Answer 3

ক্রিয়ামূলক উপাদান ব্যবহার করে 16.8+ প্রতিক্রিয়াতে, আপনি তা করবেন

import React from 'react';
import { Button, Linking } from 'react-native';

const ExternalLinkBtn = (props) => {
  return <Button
            title={props.title}
            onPress={() => {
                Linking.openURL(props.url)
                .catch(err => {
                    console.error("Failed opening page because: ", err)
                    alert('Failed to open page')
                })}}
          />
}

export default function exampleUse() {
  return (
    <View>
      <ExternalLinkBtn title="Example Link" url="https://example.com" />
    </View>
  )
}