آموزش App در React Native

0 دیدگاه

آموزش App در فریم ورک React Native

در خدمت شماییم با آموزش App در React Native از وب سایت آموزش برنامه نویسی سورس باران. در این جلسه که جلسه سوم آموزش React Native می باشد با app و خروجی در ری اکت نیتیو آشنا می شوید.

آموزش 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

برنامه 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>

);

}

امیدواریم این جلسه مورد توجه دوستان قرار گرفته باشد.

لیست جلسات قبل آموزش React Native

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

آموزش گام به گام برنامه نویسی اندروید با B4A (پروژه محور)

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۷ آبان ۱۳۹۸

آموزش App در React Native

آموزش App در React Native

خروجی در React Native

برنامه Hello world در ری اکت نیتیو

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط