React Native Navigator Stack Screen 选项未定义？

Question

I'm trying to pass in options to a stack screen component in react native as shown in this example , but whenever I define key value pairs for my options for my "memory" Stack Screen, it is as if the options are never passed in or defined. The issue starts with <MemoriesStack.Screen name="memory"... at the very bottom.

import React from 'react';
import { Dimensions, StyleSheet, ScrollView, Keyboard, Text, View, Image, SafeAreaView, Button , Pressable, TextInput, FlatList} from 'react-native';
import Header from './Header';
import { createNativeStackNavigator} from '@react-navigation/native-stack';

const url2 = 'https://i.picsum.photos/id/628/200/400.jpg?hmac=7ZTcZAuCgrEAJpEYNv_I5wpZOsJKNuA7Qemv_3cTa3A';
const url1 = 'https://i.picsum.photos/id/67/200/200.jpg?hmac=sN5XCCMqqmBvgDbYmAowWy2VToCkSYP5igDL_iRxK3M';
const url3 = 'https://i.picsum.photos/id/867/1080/1080.jpg?hmac=RSnH01QI-dSnSX_WFhmA8G-yvZ6Y93yufmfrf2I_6wM';
const url4 = 'https://i.picsum.photos/id/79/1080/1280.jpg?hmac=fNo0oYycJluh5g6hY77w5bhokdk3-qCaC86OOfc7Z48';
const url5 = 'https://i.picsum.photos/id/526/1440/1080.jpg?hmac=3fOf111RJa6yURZcui5JaaOMEEDP987-ujFOpr0cxAk';
let width = Math.floor(Dimensions.get('window').width / 2 - 4);

const styles  = StyleSheet.create({
    grid: {
        display:'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'flex-start',
        width: '100%',
        paddingLeft: 2
    },
    stretch: {
        width: width,
        height: width,
        resizeMode: 'cover',
      
    },
});

const MemoriesStack = createNativeStackNavigator();
const Memory = (props) => {
    
    console.log('---- start of memory component ----    ');
    console.log(props); // THERE SHOULD BE A KEY CALLED "Description" with value "this should be defined", but there is none
    
    const [originalDimensions, setOriginalDimensions] = React.useState();
    const [cardDimensions, setCardDimensions] = React.useState();
    
    async function getDimensions(){
        try{
            let dimensions = await new Promise((resolve, reject)=> {
                Image.getSize(url, (w, h)=> resolve({width: w, height: h}), reject);
            });
            console.log('---- original image dimensions ----');
            console.log(dimensions);
      
            setOriginalDimensions(dimensions);
        }catch(e){
            console.log(e);
        }
        
            
    }

    React.useEffect(()=> {
        getDimensions();
    }, []);

    function setCardDimensionsWrapper(e){
        let {width, height} = e.nativeEvent.layout;

        setCardDimensions({width: width, height: height});
        console.log('---- card dimensions ----');
        console.log({width, height})
    }

    

    return (
        <View >

            <Header title='memory' backButton onPress={()=> navigation.navigate('memories')}></Header>

            <View style={{display: 'flex', alignItems:'center', marginTop:20}}>
                <View
                    onLayout={setCardDimensionsWrapper}  
                    style={{backgroundColor: 'white', width:'90%', borderRadius: 20, display: 'flex'}}>
                        {
                        cardDimensions
                        ?
                        
                        <Image 
                            onLayout={(e)=> {console.log('---- new image dimensions ----'); console.log(e.nativeEvent.layout)} }
                            style={{resizeMode: 'cover', width: cardDimensions.width, height: originalDimensions.height * (cardDimensions.width / originalDimensions.width)}} 
                            source={{url: url}}>
                        </Image>
                    
                        :
                        null
                        
                        }
                    
                    <View style={{padding: 10}}>
                        <Text style={{fontSize: 20}}>To: Rebecca</Text>
                    </View>

                    <View style={{padding: 10}}>
                        <Text style={{fontSize: 15}}>This is a description</Text>
                    </View>
                </View>
            </View>
            
        </View>
    );
}

export default function Memories({navigation}){

    const navRef = React.useRef();
    const optionsRef = React.useRef();


    function memoryTap(url){
        console.log('tapped memory');
      
        navigation.navigate('memory');
        
    }

    const _Image  = ({url, tap}) => <Pressable onPress={tap} style={{padding: 1}}><Image source={{url: url}} style={styles.stretch}></Image></Pressable>
    const _Memories = ()=> {
        return (
            <View>
                <Header title='Memories'></Header>
    
                <ScrollView contentContainerStyle={styles.grid}>
                    <_Image url = {url2} tap={(url)=> memoryTap(url)} ></_Image>
                    <_Image url = {url1} tap={memoryTap} ></_Image>
                    <_Image url = {url1} tap={memoryTap} ></_Image>
                    <_Image url = {url2} tap={memoryTap} ></_Image>
                    <_Image url = {url1} tap={memoryTap} ></_Image>
                    <_Image url = {url1} tap={memoryTap} ></_Image>
                    <_Image url = {url2} tap={memoryTap} ></_Image>
                    <_Image url = {url1} tap={memoryTap} ></_Image>
                    <_Image url = {url2} tap={memoryTap} ></_Image>
                    <_Image url = {url1} tap={memoryTap} ></_Image>
                    <_Image url = {url2} tap={memoryTap} ></_Image>
                </ScrollView>
            </View>
        )
    }
    return (
        <MemoriesStack.Navigator 
            innerRef={navRef}
            screenOptions={{
            headerShown: false
          }}>
            <MemoriesStack.Screen name="memories" component={_Memories} />
            <MemoriesStack.Screen name="memory" component={Memory} options={({navigation})=> ({navigation: navigation, description: 'this should be defined'})} />
            
        </MemoriesStack.Navigator>
    )
}

Answer 1

I think you need to pass params as initialParams

Answer 2

First, you cannot get navigation options with "prop"s. You need to get it through a "route".

Second, I suggest you to use hooks ( useNavigation & useRoute ) as it's the more up to date way of using React Navigation.

You can update your code as below:

In your "Memory" component, extract the parameters from route.

const Memory = (props) => {

  console.log('---- start of memory component ----    ');
  console.log(props); // THERE SHOULD BE A KEY CALLED "Description" with value "this should be defined", but there is none

  // --------- ADD THIS ---------- //
  const route = useRoute()
  const {Description} = route.params // <--- HERE IS YOUR DESCRIPTION VARIABLE
  // ---------   END.   ----------  //
    
  const [originalDimensions, setOriginalDimensions] = React.useState();
  const [cardDimensions, setCardDimensions] = React.useState();
    
  ...
}

And in your "Memories" component, you need to pass the parameters as so:

// ------- REMOVE navigation prop and use the useNavigation hook ------- //
//export default function Memories({navigation}){
export default function Memories(){

  const navRef = React.useRef();
  const optionsRef = React.useRef();

  // ------- ADD THIS --------- //
  const navigation = useNavigation();
  // -------   END.   --------- //


  function memoryTap(url){
    console.log('tapped memory');
      
    // --------- CHANGE THIS --------- //
    // navigation.navigate('memory');
    navigation.navigate('memory', {
      Description: VARIABLE_YOU_WANT_TO_PASS_HERE
    })
    // ---------     END.    --------- //
        
  }
  ...
}

And don't forget to import the necessary libraries.

import { useNavigation, useRoute } from '@react-navigation/native';