۲۹
فروردین

جلسه ۰۳ : App در فریم ورک React Native

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

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

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. Environment Setup در React Native و مراحل نصب رو در قسمت قبل بیان نمودیم. خب حالا ادامه آموزش ری اکت نیتیو رو داریم. در این بخش APP در فریم ورک React Native و خروجی در فریم ورک React Native رو خواهیم داشت. پس همراه ما بمانید.

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

اگر برنامه پیش فرض را باز کنید می توانید ببینید که فایل app.js شبیه دستور پایین به نظر می رسد. ادامه مطالب را دنبال نمایید.

مثال :

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

export default class App extends React.Component {
   render() {
      return (
         <View style = {styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <Text>Changes you make will automatically reload.</Text>
            <Text>Shake your phone to open the developer menu.</Text>
         </View>
      );
   }
}

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

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {

render() {

return (

<Text>Open up App.js to start working on your app!</Text>

<Text>Changes you make will automatically reload.</Text>

<Text>Shake your phone to open the developer menu.</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

});

خروجی در فریم ورک React Native

آموزش فریم ورک React Native – خروجی در فریم ورک React Native

Hello world

برای نمایش یک پیغام ساده مثل “Welcome to Tutorialspoint” بخش CSS را حذف کنید و پیام را به صورت برچسب <text> </ text> در داخل <view> </ view> قرار دهید، همانطور که در زیر نشان داده شده است. ادامه مطالب را دنبال نمایید.

مثال :

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

export default class App extends React.Component {
   render() {
      return (
         <View>
            <Text>Welcome to Tutorialspoint</Text>
         </View>
      );
   }
}

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {

render() {

return (

<View>

<Text>Welcome to Tutorialspoint</Text>

</View>

);

}

Hello world – آموزش فریم ورک React Native

کلام پایانی

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

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

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

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

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

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

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

جلسه ۰۳ : App در فریم ورک React Native

مقدمه

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

خروجی در فریم ورک React Native

Hello world

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ