নেটিভ অ্যাপ্লিকেশনটিতে কীভাবে একজন হাইপারলিঙ্ক প্রদর্শন করে?

Question 1

আমি কীভাবে একটি প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশনটিতে একটি হাইপারলিঙ্ক প্রদর্শন করব?

যেমন

<a href="https://google.com>Google</a>

Question 2

এটার মতো কিছু:

<Text style={{color: 'blue'}}
      onPress={() => Linking.openURL('http://google.com')}>
  Google
</Text>

Linkingপ্রতিক্রিয়া নেটিভ সঙ্গে বান্ডিল যে মডিউল ব্যবহার ।

Question 3

নির্বাচিত উত্তরটি কেবল আইওএসকে বোঝায়। উভয় প্ল্যাটফর্মের জন্য, আপনি নিম্নলিখিত উপাদানটি ব্যবহার করতে পারেন:

import React, { Component, PropTypes } from 'react';
import {
  Linking,
  Text,
  StyleSheet
} from 'react-native';

export default class HyperLink extends Component {

  constructor(){
      super();
      this._goToURL = this._goToURL.bind(this);
  }

  static propTypes = {
    url: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  }

  render() {

    const { title} = this.props;

    return(
      <Text style={styles.title} onPress={this._goToURL}>
        >  {title}
      </Text>
    );
  }

  _goToURL() {
    const { url } = this.props;
    Linking.canOpenURL(url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log('Don\'t know how to open URI: ' + this.props.url);
      }
    });
  }
}

const styles = StyleSheet.create({
  title: {
    color: '#acacac',
    fontWeight: 'bold'
  }
});

Question 4

এটি করার জন্য, আমি দৃ strongly়ভাবে একটিতে একটি Textউপাদান মোড়ানো বিবেচনা করব TouchableOpacity। যখন একটিTouchableOpacity স্পর্শ করা হয়, এটি বিবর্ণ হয় (কম অস্বচ্ছ হয়ে ওঠে)। পাঠ্যটি স্পর্শ করার সময় এটি ব্যবহারকারীর তাত্ক্ষণিক প্রতিক্রিয়া দেয় এবং উন্নত ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করে।

লিঙ্কটি ঘটতে আপনি onPressসম্পত্তিটি ব্যবহার করতে পারেন TouchableOpacity:

<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}>
  <Text style={{color: 'blue'}}>
    Google
  </Text>
</TouchableOpacity>

Question 5

নেটিভ ডকুমেন্টেশন প্রতিক্রিয়া ব্যবহারের পরামর্শ দেয় `Linking`:

রেফারেন্স

এখানে একটি খুব বেসিক ব্যবহারের কেস:

import { Linking } from 'react-native';

const url="https://google.com"

<Text onPress={() => Linking.openURL(url)}>
    {url}
</Text>

আপনি কার্যকরী বা শ্রেণীর উপাদান স্বরলিপি, ডিলার পছন্দ ব্যবহার করতে পারেন।

Question 6

নেটিভ হাইপারলিঙ্ক প্রতিক্রিয়া ব্যবহার করুন (নেটিভ <A>ট্যাগ):

ইনস্টল করুন:

npm i react-native-a

আমদানি:

import A from 'react-native-a'

ব্যবহার:

<A>Example.com</A>
<A href="example.com">Example</A>
<A href="https://example.com">Example</A>
<A href="example.com" style={{fontWeight: 'bold'}}>Example</A>

Question 7

উপরের প্রতিক্রিয়াগুলিতে যুক্ত করার জন্য আরেকটি সহায়ক নোট হ'ল কিছু ফ্লেক্সবক্স স্টাইলিং যুক্ত করা। এটি পাঠ্যটিকে এক লাইনে রাখবে এবং নিশ্চিত করবে যে পাঠ্যটি স্ক্রিনকে ওভারল্যাপ করে না।

 <View style={{ display: "flex", flexDirection: "row", flex: 1, flexWrap: 'wrap', margin: 10 }}>
  <Text>Add your </Text>
  <TouchableOpacity>
    <Text style={{ color: 'blue' }} onpress={() => Linking.openURL('https://www.google.com')} >
         link
    </Text>
   </TouchableOpacity>
   <Text>here.
   </Text>
 </View>

Question 8

প্রতিক্রিয়া নেটিভের জন্য, অ্যাপটিতে হাইপারলিংকগুলি খোলার পাঠাগার রয়েছে। https://www.npmjs.com/package/react-native-hyperlink

এগুলি ছাড়াও, আমি মনে করি আপনাকে ইউআরএল পরীক্ষা করতে হবে এবং সেরা পদ্ধতির নাম রেজেজ ge https://www.npmjs.com/package/url-regex

Question 9

প্রতিক্রিয়া নেটিভ থেকে মডিউলটির সংযোগ আমদানি করুন

import { TouchableOpacity, Linking } from "react-native";

এটি ব্যবহার করে দেখুন: -

<TouchableOpacity onPress={() => Linking.openURL('http://Facebook.com')}>
     <Text> Facebook </Text>     
</TouchableOpacity>

Question 10

আপনি যদি লিঙ্কগুলি এবং অন্যান্য ধরণের সমৃদ্ধ পাঠ্য করতে চান তবে আরও কার্যকর সমাধান হ'ল রিএ্যাক্ট নেটিভ এইচটিএমএল ভিউ ব্যবহার করা ।

Question 11

ভেবেছি আমি এই সমস্যাটি এখন যে কেউ আবিষ্কার করছে তার সাথে আমার স্ট্রিমের মধ্যে এম্বেড থাকা লিঙ্কগুলি ভাগ করব এটি লিঙ্কগুলিকে এটিকে যে কোনও স্ট্রিংতে খাওয়ানো হয় তা গতিসম্পন্ন করে ইনলাইন করার চেষ্টা করে।

আপনার প্রয়োজন অনুসারে এটি নিঃসঙ্কোচ করুন। এটি আমাদের উদ্দেশ্যে যেমন কাজ করছে:

এটি https://google.com কীভাবে প্রদর্শিত হবে তার একটি উদাহরণ ।

এটি গিস্ট এ দেখুন:

https://gist.github.com/Fenderly-Robot/b4fa8501238b1118caaa908b08eb49e2

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

export default function renderHyperlinkedText(string, baseStyles = {}, linkStyles = {}, openLink) {
  if (typeof string !== 'string') return null;
  const httpRegex = /http/g;
  const wwwRegex = /www/g;
  const comRegex = /.com/g;
  const httpType = httpRegex.test(string);
  const wwwType = wwwRegex.test(string);
  const comIndices = getMatchedIndices(comRegex, string);
  if ((httpType || wwwType) && comIndices.length) {
    // Reset these regex indices because `comRegex` throws it off at its completion. 
    httpRegex.lastIndex = 0;
    wwwRegex.lastIndex = 0;
    const httpIndices = httpType ? 
      getMatchedIndices(httpRegex, string) : getMatchedIndices(wwwRegex, string);
    if (httpIndices.length === comIndices.length) {
      const result = [];
      let noLinkString = string.substring(0, httpIndices[0] || string.length);
      result.push(<Text key={noLinkString} style={baseStyles}>{ noLinkString }</Text>);
      for (let i = 0; i < httpIndices.length; i += 1) {
        const linkString = string.substring(httpIndices[i], comIndices[i] + 4);
        result.push(
          <Text
            key={linkString}
            style={[baseStyles, linkStyles]}
            onPress={openLink ? () => openLink(linkString) : () => Linking.openURL(linkString)}
          >
            { linkString }
          </Text>
        );
        noLinkString = string.substring(comIndices[i] + 4, httpIndices[i + 1] || string.length);
        if (noLinkString) {
          result.push(
            <Text key={noLinkString} style={baseStyles}>
              { noLinkString }
            </Text>
          );
        }
      }
      // Make sure the parent `<View>` container has a style of `flexWrap: 'wrap'`
      return result;
    }
  }
  return <Text style={baseStyles}>{ string }</Text>;
}

function getMatchedIndices(regex, text) {
  const result = [];
  let match;
  do {
    match = regex.exec(text);
    if (match) result.push(match.index);
  } while (match);
  return result;
}

Question 12

আপনি লিঙ্কিং প্রপার্টি ব্যবহার করতে পারেন <টেক্সট স্টাইল = {{রঙ: 'স্কাই ব্লু'}} অনপ্রেস = {() => লিঙ্কিং.ওপেন URL ('http://yahoo.com') Yah> ইয়াহু

নেটিভ অ্যাপ্লিকেশনটিতে কীভাবে একজন হাইপারলিঙ্ক প্রদর্শন করে?

নেটিভ ডকুমেন্টেশন প্রতিক্রিয়া ব্যবহারের পরামর্শ দেয় Linking:

এখানে একটি খুব বেসিক ব্যবহারের কেস:

আপনি কার্যকরী বা শ্রেণীর উপাদান স্বরলিপি, ডিলার পছন্দ ব্যবহার করতে পারেন।

নেটিভ ডকুমেন্টেশন প্রতিক্রিয়া ব্যবহারের পরামর্শ দেয় `Linking`: