Warum kann ich const-Variablen nicht in verschiedene React-Dateien übertragen?

Question

Ich versuche also, eine const-Variable von einer Datei in eine andere zu übertragen. Aus irgendeinem Grund kann ich nicht darauf zugreifen und ich kann es nicht in einer Textdatei anzeigen. Unten finden Sie den homepage.js-Code und die pay.js-Datei. Ich versuche, die Variable displayAmount aus der Homepage-Datei in die Premium-Datei zu übertragen und sie dann in einem Textelement anzuzeigen. Wenn ich das mache, erhalte ich jedoch die Fehlermeldung „Fehler: Textzeichenfolge muss innerhalb einer Komponente gerendert werden.“

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

几个选项：

1. 对于静态值，导出非嵌套const 中的值。通常将常量分开，这样，如果两个组件需要相同的常量，而其中一个组件需要另一个组件，则不会创建 require 循环。仅供参考，导出常量被命名为导出 VS 默认导出。所以需要用大括号导入。

//constants file
export const value1 = '123456'

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

2. 对于需要跨应用导出的有状态值，请查看 React.Context API 或全局状态管理库。
3. 对于子组件，您可以通过 props 将数据传递给组件。
4. 对于 React-navigation 屏幕导航，您可以通过 params 对象将参数发送到屏幕。