برنامه نویسی

چگونه وارد React Native شویم؟

برای شروع کار با React Native، ابتدا باید درک کاملی از React و JavaScript داشته باشید. در اینجا مراحل اساسی برای شروع با React Native آورده شده است:

  1. با اجرا کردن، React Native CLI (واسط خط فرمان) را نصب کنید npm install -g react-native-cli

  2. با اجرای react-native init MyProject یک پروژه جدید ایجاد کنید

  3. با اجرا، پروژه را روی یک شبیه ساز یا دستگاه اجرا کنید react-native run-ios or react-native run-android

  4. توسعه برنامه خود را با ویرایش فایل های موجود در فهرست src پروژه خود شروع کنید

  5. از اجزای داخلی React Native مانند View، Text و Image برای ساخت رابط کاربری خود استفاده کنید.

  6. از API های React Native مانند Fetch و AsyncStorage برای دسترسی به عملکرد و داده های دستگاه استفاده کنید.

یک برنامه ماشین حساب ساده:

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

const Calculator = () => {
    const [input, setInput] = useState('');
    const [result, setResult] = useState('');

    const handleButtonPress = (val) => {
        setInput(input + val);
    }

    const handleClearPress = () => {
        setInput('');
        setResult('');
    }

    const handleEqualPress = () => {
        setResult(eval(input));
    }

    return (
        <View>
            <Text>{input}</Text>
            <Text>{result}</Text>
            <View>
                <Button title="1" onPress={() => handleButtonPress(1)} />
                <Button title="2" onPress={() => handleButtonPress(2)} />
                <Button title="3" onPress={() => handleButtonPress(3)} />
                <Button title="+" onPress={() => handleButtonPress('+')} />
            </View>
            <View>
                <Button title="4" onPress={() => handleButtonPress(4)} />
                <Button title="5" onPress={() => handleButtonPress(5)} />
                <Button title="6" onPress={() => handleButtonPress(6)} />
                <Button title="-" onPress={() => handleButtonPress('-')} />
            </View>
            <View>
                <Button title="7" onPress={() => handleButtonPress(7)} />
                <Button title="8" onPress={() => handleButtonPress(8)} />
                <Button title="9" onPress={() => handleButtonPress(9)} />
                <Button title="*" onPress={() => handleButtonPress('*')} />
            </View>
            <View>
                <Button title="." onPress={() => handleButtonPress('.')} />
                <Button title="0" onPress={() => handleButtonPress(0)} />
                <Button title="C" onPress={handleClearPress} />
                <Button title="https://dev.to/" onPress={() => handleButtonPress('/')} />
            </View>
            <View>
                <Button title="=" onPress={handleEqualPress} />
            </View>
        </View>
    );
}

export default Calculator;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا