هل هناك طريقة لتمرير قيمة الخطاف useState خارج body الخاص ب الفانكشن ؟

لتنفيذ هذا الأمر عادةً ما نقوم بالتالي:

• الطريقة الأولى هي استخدام الوسم style و إعطائه attribute يسمى jsx بحيث نتمكن من كتابة أكواد javaScript داخل أكواد ال css، و يتم وضع هذا الوسم داخل ال component، لاحظ المثال التالي:

import React from "react";

const Button = props => (
  <button>
    {props.children}
    <style jsx>{`
      button {
        padding: ${"large" in props ? "60" : "20"}px;
        background: ${props.background};
        color: black;
        display: inline-block;
        font-size: 1em;
      }
    `}</style>
  </button>
);

export default function App() {
  return (
    <div>
      <Button large background="orange">
        click me
      </Button>
    </div>
  );
}

• أو يمكنك وضع التنسيقات الخاصة بوضع معين داخل صنف ما و تقوم بكتابة التنسيقات الخاصة به في ملف styleSheet خارجي و بعدها تقوم بالتبديل بين الأصناف حسب الحالة في الملف الخاص بالمكون، لاحظ المثال التالي:

import React, { useEffect, useState } from 'react';
import './Nav.css';

function Nav() {

    const [show, handleShow] = useState(false);

    useEffect(() => {
        window.addEventListener( "scroll", ()=> {
            if (window.scrollY > 100) {
                handleShow(true);
            } else handleShow(false);
        });

        return () => {
            window.removeEventListener("scroll");
        }

    }, []);

    return (
        <div className={` nav ${show && "nav__black"}`}> {/* نقوم بإضافة صنف حسب قيمة الحالة  */}
            <img
                className="nav__logo"
                src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg"
                alt = "Netflix logo"
            />

           <img
                className="nav__avatar"
                src="https://pbs.twimg.com/profile_images/1240119990411550720/hBEe3tdn_400x400.png"
                alt = "Netflix logo"
            /> 

            
            
        </div>
    )
}

export default Nav;

أمّا عن تمرير قيمة الحالة خارج الدالة الخاصة به لأنك تريد مشاركته مع مكونات أخرى مثلًا فأعتقد أن هذه وظيفة مكتبات إدارة الحالة مثل Redux مثلًا أو React context api و غيرها

لا يمكنك اخراج الخطاف خارج الدالة ولكن في حالتك يمكن ان تدخل styles داخل الدالة وهكذا darkMode سيكون معرف

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

function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);

  const styles = StyleSheet.create({
    con: {
      backgroundColor: darkMode ? 'black' : 'gray',
      flex: 1,
    },
    text: {
      color: darkMode ? 'white' : 'black',
    },
  });

  return (
    <View style={styles.con}>
      <Text style={styles.text}>{darkMode ? "That's Dark Mode" : "That's Light Mode"}</Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

export default HookProblem;

او يمكنك اخراج darkMode الى الخارج باعطاءه لدالة تحتوي styles  وترجعها

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

function passDarkMode(darkMode) {
  return StyleSheet.create({
    con: {
      backgroundColor: darkMode ? 'black' : 'gray',
      flex: 1,
    },
    text: {
      color: darkMode ? 'white' : 'black',
    },
  });
}

function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);

  const styles = passDarkMode(darkMode);

  return (
    <View style={styles.con}>
      <Text style={styles.text}>{darkMode ? "That's Dark Mode" : "That's Light Mode"}</Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

export default HookProblem;

بالتوفيق