Pourquoi ne puis-je pas transférer des variables const vers différents fichiers React

Question

J'essaie donc de transférer une variable const d'un fichier à un autre. Pour une raison quelconque, je ne peux pas y accéder et il ne me permet pas de l'afficher dans un fichier texte. Vous trouverez ci-dessous le code homepage.js et le fichier pay.js. J'essaie de transférer la variable displayAmount du fichier de la page d'accueil vers le fichier premium, puis de l'afficher dans un élément de texte. Cependant, lorsque je fais cela, j'obtiens cette erreur "Erreur : la chaîne de texte doit être rendue dans un composant

."

import { StyleSheet, Text, View, Image, Dimensions, TouchableOpacity, Alert, Animated } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
import React, { useState, useEffect, useRef } from 'react';
import { useNavigation } from '@react-navigation/native';
import pay from './pay';

const homepage = ({ route, navigation }) => {
  const [selectedAmount, setSelectedAmount] = useState("0");
  const [displayedAmount, setDisplayedAmount] = useState("0");
  const fadeAnim = new Animated.Value(0);  // initial opacity
  const screenWidth = Dimensions.get('window').width;
  const buttonWidth = screenWidth * 0.45;
  const spaceBetweenNumbers = 100;
  
  
  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();
    
    if (selectedAmount.includes('.')) {
        const [whole, decimal] = selectedAmount.split('.');
        setDisplayedAmount(`${isNaN(parseInt(whole)) ? "0" : parseInt(whole).toLocaleString()}.${decimal}`);
      } else {
        setDisplayedAmount(isNaN(parseInt(selectedAmount)) ? "0" : parseInt(selectedAmount).toLocaleString());
      }

    Animated.timing(
      fadeAnim,
      {
        toValue: 0,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();

  }, [selectedAmount]);

  const handleNumberPress = (number) => {
    if (selectedAmount.length < 5) {
      setSelectedAmount(prevState => prevState === "0" ? String(number) : prevState + number);
    }
  };

  const handleDecimalPress = () => {
    if (!selectedAmount.includes(".") && selectedAmount.length < 4) {
      setSelectedAmount(prevState => prevState + ".");
    }
  };

  const handleDeletePress = () => {
    setSelectedAmount(prevState => prevState.slice(0, -1) || "0");
  };
  const goTopay = () => {
    navigation.navigate('Pay', { displayedAmount }); // passing displayedAmount as a parameter
  };

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import React from 'react';
 import { Feather } from '@expo/vector-icons';
 import { createStackNavigator } from '@react-navigation/stack';
 import homepage from './homepage';
 import displayedAmount from './homepage'
 
 
 const Pay = ({ route, navigation }) => {
     const { displayedAmount } = route.params;
     const goToHome = () => {
     navigation.navigate('Homepage'); // The corrected screen name should be 'Homepage' instead of 'homepage'
   };
 
   return (
     <View>
       <TouchableOpacity onPress={goToHome}>
         <Feather name="x" color="black" size={30} style={styles.cross} />
       </TouchableOpacity>
       <View
   style={{
     borderBottomColor: 'grey',
     borderBottomWidth: StyleSheet.hairlineWidth,
     marginTop: 95,
   }}
 />
 <Text style={styles.to}>To</Text>
 <View
   style={{
     borderBottomColor: 'grey',
     borderBottomWidth: StyleSheet.hairlineWidth,
     marginTop: 55,
   }}
 />
 <Text style={styles.for}>For</Text>
 <View
   style={{
     borderBottomColor: 'grey',
     borderBottomWidth: StyleSheet.hairlineWidth,
     marginTop: 55,
   }}
 />
 <Text>{displayedAmount}</Text> {/* Display the displayedAmount */}
     </View>
     
   );
 };
 
 export default Pay;
 
 const styles = StyleSheet.create({
   cross: {
     position: 'absolute',
     left: 15,
     top: 50,
   },
   to:{
     fontFamily: 'CashMarketMedium',
     fontSize: 16,
     position: 'absolute',
     left: 19,
     top: 110,
   },
   for:{
     fontFamily: 'CashMarketMedium',
     fontSize: 16,
     position: 'absolute',
     left: 19,
     top: 165,
   },
   line: {
     position: 'absolute',
     left: 15,
     top: 50 + 36 + 4, // To position the line below the 'x' icon, we add its size (36) and some margin (4)
     width: '100%',
     height: 1,
     backgroundColor: 'grey',
   },
 });

Answer 1

Plusieurs options :

1. Pour les valeurs statiques, exportez la valeur dans un format non imbriqué const. Il est courant de séparer les constantes de sorte que si deux composants nécessitent la même constante et que l'un nécessite l'autre, aucune boucle require n'est créée. Pour information, les constantes d'exportation sont nommées export VS export par défaut. Vous devez donc utiliser des accolades pour importer.

//constants file
export const value1 = '123456'

// component file
import { value1 } from '../constants'

2. Pour les valeurs avec état qui doivent être exportées entre les applications, consultez l'API React.Context ou la bibliothèque globale de gestion d'état.
3. Pour les composants enfants, vous pouvez transmettre des données au composant via des accessoires.
4. Pour la navigation sur l'écran de navigation React, vous pouvez envoyer des paramètres à l'écran via l'objet params.