البرمجة

استخدام View بدلاً من div في React Native

09/03/2024
3 دقيقة واحدة

السبب في ظهور هذا الخطأ هو أن React Native لا يمكنه فهم عناصر HTML المعتادة مثل

، حيث يتوقع استخدام مكونات React Native الخاصة به مثل بدلاً من

.

لتصحيح الخطأ، يمكنك ببساطة استبدال

ب ، وذلك لأن هو المكون المناسب لتحقيق تنسيقات تشبه

في React Native. وبالتالي، يمكنك تعديل الكود كما يلي:

javascript
var React = require('react');
var ReactNative = require('react-native');
var {
  StyleSheet,
  Text,
  View,
} = ReactNative;

let Auto = React.createClass({
  getInitialState: function() {
    return { value: 'Ma' }
  },
  render: function() {
    return (
      <View style={styles.container}>
        <Text>Blah blah blahText>
      View>
    )
  }
});

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

module.exports = Auto;

بهذا التعديل، يجب أن تتجنب ظهور الخطأ وتتمكن من استخدام بدلاً من

بنجاح في تطبيق React Native الخاص بك.

المزيد من المعلومات

بالطبع! في React Native، تعتبر بديلاً عن

في HTML، حيث تُستخدم لإنشاء عناصر تخطيط داخل التطبيق. يمكنك استخدام لتجميع عناصر UI الأخرى مثل و و وغيرها لإنشاء واجهة مستخدم متكاملة.

بالنسبة للأسلوب createClass الذي استخدمته في المثال السابق، يُعتبر من قديم الطراز في React. في الإصدارات الحديثة من React Native، تم تجاهل هذا الأسلوب لصالح استخدام الدوال المكونة (functional components) أو الكلاسات (class components) مع hooks. إليك مثال على كيفية إعادة كتابة المثال السابق باستخدام دالة مكونة:

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

const Auto = () => {
  const [value, setValue] = useState('Ma');

  return (
    <View style={styles.container}>
      <Text>Blah blah blahText>
    View>
  );
};

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

export default Auto;

في هذا المثال، تم استخدام الدالة المكونة useState لإضافة حالة إلى المكون. يتم تعريف مظهر المكون في الكائن styles باستخدام StyleSheet.create، ويتم تصدير المكون باستخدام export default.

الوسوم
09/03/2024
3 دقيقة واحدة
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى