Mengapa saya tidak boleh memindahkan pembolehubah const ke fail React yang berbeza

Question

Jadi saya cuba memindahkan pembolehubah const dari satu fail ke fail yang lain. Atas sebab tertentu saya tidak boleh mengaksesnya dan ia tidak membenarkan saya memaparkannya dalam fail teks. Di bawah ialah kod laman utama.js dan fail pay.js. Saya cuba memindahkan pembolehubah displayedAmount daripada fail halaman utama ke fail premium dan kemudian memaparkannya dalam elemen teks. Walau bagaimanapun, apabila saya melakukan ini, saya mendapat ralat ini "Ralat: Rentetan teks mesti dipaparkan dalam komponen

."

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

Beberapa pilihan:

1. Untuk nilai statik, eksport nilai dalam bukan bersarang const. Adalah lazim untuk memisahkan pemalar supaya jika dua komponen memerlukan pemalar yang sama dan satu memerlukan pemalar yang lain, tiada gelung memerlukan dicipta. FYI, pemalar eksport dinamakan eksport VS eksport lalai. Jadi anda perlu menggunakan pendakap kerinting untuk mengimport.

//constants file
export const value1 = '123456'

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

2. Untuk nilai stateful yang perlu dieksport ke seluruh aplikasi, lihat React.Context API atau pustaka pengurusan keadaan global.
3. Untuk komponen kanak-kanak, anda boleh menghantar data kepada komponen melalui prop.
4. Untuk navigasi skrin navigasi React, anda boleh menghantar parameter ke skrin melalui objek params.