۲۹
فروردین

جلسه ۲۰ : WebView در فریم ورک React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در جلسات قبل چگونگی اجرای برنامه ی React Native در IOS و اندروید رو بررسی نمودیم. سپس به View رایج ترین عنصر در React Native و چگونگی استفاده از View رو بیان نمودیم . حالا و در این جلسه به WebView در فریم ورک React Native و موارد استفاده از WebView در React Native رو مورد بررسی قرار خواهیم داد. پس با WebView در فریم ورک React Native همراه ما باشید.

WebView در فریم ورک React Native

در این فصل، ما نحوه استفاده از WebView را یاد خواهیم گرفت. این مورد زمانی استفاده می شود که می خواهید صفحه وب را به صورت خطی در برنامه تلفن همراه خود رندر کنید.

استفاده از WebView در React Native

HomeContainer کامپوننت container خواهد بود.

App.js

مثال :

import React, { Component } from 'react'
import WebViewExample from './web_view_example.js'

const App = () => {
   return (
      <WebViewExample/>
   )
}
export default App;

import React, { Component } from 'react'

import WebViewExample from './web_view_example.js'

const App = () => {

return (

)

}

export default App;

اجازه دهید ما یک فایل جدید به نام WebViewExample.js ایجاد کنیم در داخل پوشه src/components/home folder.

web_view_example.js

مثال :

import React, { Component } from 'react'
import { View, WebView, StyleSheet }

from 'react-native'
const WebViewExample = () => {
   return (
      <View style = {styles.container}>
         <WebView
         source = {{ uri:
         'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint' }}
         />
      </View>
   )
}
export default WebViewExample;

const styles = StyleSheet.create({
   container: {
      height: 350,
   }
})

import React, { Component } from 'react'

import { View, WebView, StyleSheet }

from 'react-native'

const WebViewExample = () => {

return (

<WebView

source = {{ uri:

'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint' }}

</View>

)

}

export default WebViewExample;

const styles = StyleSheet.create({

container: {

height: 350,

}

})

برنامه فوق خروجی زیر را تولید می کند.

WebView در فریم ورک React Native

کلام پایانی

خب در این قسمت از سری آموزش های راکت نیتیو به WebView در فریم ورک React Native پرداختیم و چگونگی استفاده از WebView در React Native رو مورد بررسی قرار دادیم. و در پایان مثالی راجع به این موضوع نیز داشتیم تا هرچه بهتر متوجه مبحث وب ویو شویم. امیدوارم آموزش ها مفید واقع شود. در ادامه به Modal یا مودال ها در فریم ورک React Native می پردازیم. دوستان عزیز با ما همراه باشید.

QR: جلسه ۲۰ : WebView در فریم ورک React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 1

محسن
آذر ۲۸, ۱۳۹۸
سلام
یه ویال من از RN 0.61.5 استفاده میکنم که در این نسخه وب ویو در کتابخانه جدا قرار گرفته اما پس از اینه دستور npm install –save react-native-webview را در مسیر یه پروژه اجرا کردم آن پروژه دیگر اجرا نشده و بخشی از خطا به صورت زیر است:
could not resolve all artifats for configuration ‘:react-native-webview:classpath’
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۰ : WebView در فریم ورک React Native

مقدمه

WebView در فریم ورک React Native

استفاده از WebView در React Native

App.js

web_view_example.js

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ