为什么外部函数无法在 React 中导航其他 javascript 文件？

Question

我正在制作包含 Todo 应用程序的简单应用程序。 但是，位于同一 Javascript 文件中位于 main 函数之外的函数（这个表达式对吗？）无法导航到其他屏幕。

下面是我的屏幕结构（简化）

<Stack.Screen name="Myqtwrite" component={MyqtwriteScreen} options={{headerShown: false}} />
<Stack.Screen name="Myqtupdate" component={MyqtupdateScreen} options={{headerShown: false}} />

问题在下面。 我表达了问题的位置。

MyqtwriteScreen.js

export function Note(props, {navigation, route}) {
return (
    <View style={[styles.myblock, {backgroundColor:props.val.color}]}>
        <View style={{alignItems:'flex-start'}}>
            <View style={{borderBottomWidth:2,borderColor:'white',marginBottom:5}}>
                <Text style={[styles.myblocktitle]}>{props.val.date}</Text>
            </View>
            <Text style={styles.myblocktext}>{props.val.note}</Text>
        </View>
        <View style={{width: '100%' ,flexDirection:'row',justifyContent:'flex-end'}}>
/* problem is here-->  */   <TouchableOpacity onPress={() => {navigation.navigate('Myqtupdate') }} style={{marginTop:5,marginLeft:10}} >
                <Text style={styles.myblockbuttontext}>UPDATE</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={props.deleteMethod} style={{marginTop:5,marginLeft:10}} >
                <Text style={styles.myblockbuttontext}>DELETE</Text>
            </TouchableOpacity>
        </View>
    </View>
);

}

export function MyqtwriteScreen({ navigation, route }) {

const [noteArray, setNoteArray] = useState([]);
const [noteText, setNoteText] = useState('');

let rdcolor = 'hsl('+Math.random()*255+','+ Math.random()*(60)+10+'%, 82%)';

let notes = noteArray.map((val, key) => {
    console.log('start');
    return <Note key={key} keyval={key} val={val}
        deleteMethod={() => deleteNote(key)} />
});
const addNote = () => {
    if (noteText) {
        var d = new Date();
        noteArray.unshift({
            'date': d.getFullYear() +
                "Y " + (d.getMonth() + 1) +
                "월 " + d.getDate() + "일 " + d.getHours() + "시 " + d.getMinutes()+"분",
            'note': noteText,
            'color': rdcolor,
        });
        setNoteArray(noteArray);
        setNoteText('');
        // alert('큐티 입력을 완료했습니다.');
    }
    else {
        alert('큐티를 입력하세요');
    }
};
const deleteNote = (key) => {
    const newArray = [...noteArray];
    newArray.splice(key, 1);
    setNoteArray(newArray);
};

return (
    <View style={styles.container}>
        <View style={styles.topbar}>
            <Text style={styles.topbartext}>오늘의 큐티</Text>
            <Icon style={styles.topbarmenu} name="close" onPress={() => { navigation.navigate('My') }} />
        </View>
        <View style={styles.qtinputblock}>
            <TextInput
                onChangeText={(noteText) => setNoteText(noteText)}
                value={noteText}
                placeholder='큐티를 입력하세요'
                placeholderTextColor='gray'
                multiline={true}
                style={styles.qtinputtext}
            />
            <TouchableOpacity onPress={addNote} style={styles.myblockbutton}>
                <Text style={styles.myblockbuttontext}>추가</Text>
            </TouchableOpacity>
        </View>

        <ScrollView style={styles.scroll}>
            <View style={{alignItems:'flex-start'}}>
                {notes}
            </View>
        </ScrollView>



    </View>
);


}

    

我当然制作了“MyqtupdateScreen.js”文件。

最有趣的是，当我在 'function MyqtwriteScreen({navigation, route'})' 中的一些TouchableOpacity 中编写相同的onPress={() => {navigation.navigate('Myqtupdate') }}时，它起作用了！！ 我不明白为什么 navigation.navigate('Myqtupdate') 在导出函数 Note 中不起作用，但在导出函数 MyqtwriteScreen 中起作用。

任何话都会有帮助！

Answer 1

注意没有导航道具，你必须像下面一样传递它

 return <Note key={key} keyval={key} val={val} navigation={navigation} deleteMethod={() => deleteNote(key)} />

它在另一个屏幕上作为堆栈的一部分工作。

您还可以使用 useNavigation 挂钩来访问导航。