آموزش App در React Native

آموزش 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',
   },
});

خروجی در 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>
      );
   }
}

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

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

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native

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