دوشنبه ۰۶ شهریور ۰۲ ۱۱:۲۲   ۲۴ بازديد  
            View
View همه گیرترین المان در React Native میباشد.
میتوانید آن را هم اندازه المان div آیتم به کار گیری در توسعه و گسترش طراحی اپلیکیشن در مشهد اینترنت در لحاظ بگیرید.
کاربرد View
اذن دهید در حال حاضر چندین گزینه استعمال رایج را ببینیم :
زمانی که نیاز دارید المان خویش را در باطن کانتینر بگذارید ، میتوانید از View تحت عنوان یک المان کانتینر استعمال نمائید.
هنگامی می خواهید المان های بیشتری را داخل المان والد قرار دهید ، هم والد و هم فرزند می توانند View باشند.
قادر است به تعداد دلخواه child داشته باشد.
زمانی میخواهید به المان های متعدد استایل بدهید ، میتوانید آنان را در View قرار دهید چون از خصوصیت style، flexbox و … امان مینماید.
View همینطور از synthetic touch events تامین می نماید که میتواند برای هدف ها متفاوت موثر باشد.
ما تا قبل از اینً از View در بخش اولیه یادگرفتن ری اک نیتیو خویش استعمال کرده ایم و به طور تقریبً در مجموع قسمت های آتی نیز از آن استعمال خوا هیم کرد.
View را می شود به تیتر یک المان پیش فرض در React Native در لحاظ گرفت.
در مثالی که در تحت نقل شده میباشد، ما دو View و یک متن را داخل هم خوا هیم کرد.
import React, { Component } from 'react'
import { View, Text } from 'react-native'
const App = () => {
return (
This is my text
)
}
export default App
WebView
دراین FOA روش به کارگیری از WebView را خاطر خوا هیم گرفت.
اینترنت ویویزمانی استعمال می گردد که میخواهید ورقه اینترنت را به طور باطن خطی در اپ گوشی خویش رندر فرمایید.
(برای شناخت بیشتر با نرم افزار های اینترنت ویو میتوانید از پیوند آن استعمال نمائید.)
با استعمال از WebView
HomeContainer یک کامپوننت کانتینر خواهد بود.
import React, { Component } from 'react'
import WebViewExample from './web_view_example.js'
const App = () => {
return (
)
}
export default App;
اذن دهید یک فولدر نو به اسم WebViewExample.js در درون فولدر src/components/home تولید کنیم.
import React, { Component } from 'react'
import { View, WebView, StyleSheet }
from 'react-native'
const WebViewExample = () => {
return (
source = {{ uri:
'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint' }}
/>
)
}
export default WebViewExample;
const styles = StyleSheet.create({
container: {
height: 350,
}
})
- ۰ ۰
 - ۰ نظر