React Native实现第二屏向第一屏传递输入值的问题求助

我正在做一个高中项目，需要用React Native把第二屏幕的输入内容展示到第一屏幕。尝试用全局变量传递值时，页面空白还触发了Hook错误。下面是两个屏幕的代码，求解决怎么把第二屏的值传到第一屏：

Screen 2（AddBookPage） #

import React, { useState } from "react";
import { TextInput, View, Text, Button } from "react-native";
import ModalDropdown from 'react-native-modal-dropdown';
import BookTitle from "../values/bookTitle";

const [TitleBook, setTitleBook] = useState('')

const AddBookPage = ({navigation}) =>{
    return(
        <View>
            <Text>Enter The Book's Title</Text>
            <TextInput placeholder="Book's Title" onChangeText={newtext => setTitleBook(newtext)}></TextInput>
            <Text>Enter The Book's Author</Text>
            <TextInput placeholder="Book's Author"></TextInput>
            <ModalDropdown options={['Fiction', 'Non-Fiction', 'Fantasy', 'Mystery', 'Educational']}/>
            <Text>Enter The Book's Number Of Pages </Text>
            <TextInput placeholder="0"></TextInput>

            <Button title="Add Book" onPress={ () => {
                BookTitle = TitleBook;
                navigation.navigate('Home');
            }}></Button>
        </View>
    )
};

export default AddBookPage;

Screen 1（HomePage） #

import React from 'react';
import { Button, View, Text } from 'react-native';
import BookTitle from '../values/bookTitle';

const HomePage = ({navigation}) =>{
    return(
        <View>
            <Button title='Add A Book' onPress={ () => {
                navigation.navigate('AddBook');
                }}></Button>
            <Button title='Genre'></Button>
            <Button title='History'></Button>

            <Text>User Profile</Text>
            <Text>Last Read Book : {BookTitle}</Text>
            <Text>Book Author : </Text>
            <Text>Book Genre : </Text>
            <Text>Book Total Pages : </Text>

            <Text>Total Number Of Pages Read Across All Books : </Text>
            <Text>Average Number Of Pages Read Across All Books : </Text>

        </View>
    )
};

export default HomePage;

我试过声明全局变量让两个屏幕访问来传值，但没成功。

1. 先修复Hook错误 #

你把useState声明在了组件外面，违反了React Hook的规则——Hook必须在组件函数内部的顶层调用。把状态声明移到AddBookPage组件内：

const AddBookPage = ({navigation}) =>{
    // 将useState移到组件内部
    const [TitleBook, setTitleBook] = useState('')
    return(
        // 原有渲染代码
    )
};

2. 用React Navigation参数传递（最简单方案） #

不需要全局变量，React Navigation自带跳转传参功能：

修改Screen 2的跳转逻辑

点击按钮时把书名作为参数传给Home页面：

<Button title="Add Book" onPress={ () => {
    navigation.navigate('Home', { lastBookTitle: TitleBook });
}}></Button>

修改Screen 1接收参数

通过route.params获取传递的值，同时处理参数为空的情况：

import React from 'react';
import { Button, View, Text } from 'react-native';

const HomePage = ({navigation, route}) =>{
    // 读取参数，默认空字符串
    const lastBookTitle = route.params?.lastBookTitle || '';
    
    return(
        <View>
            <Button title='Add A Book' onPress={ () => navigation.navigate('AddBook')}></Button>
            <Button title='Genre'></Button>
            <Button title='History'></Button>

            <Text>User Profile</Text>
            <Text>Last Read Book : {lastBookTitle}</Text>
            {/* 其余内容保持不变 */}
        </View>
    )
};

export default HomePage;

3. 持久化数据（可选，重启APP仍保留） #

如果需要长期保存书籍信息，可使用AsyncStorage：

在AddBookPage中保存数据

import AsyncStorage from '@react-native-async-storage/async-storage';

// 组件内部按钮点击逻辑
<Button title="Add Book" onPress={ async () => {
    try {
        await AsyncStorage.setItem('lastBookTitle', TitleBook);
        navigation.navigate('Home');
    } catch (e) {
        console.log('保存失败:', e);
    }
}}></Button>

在HomePage中读取数据

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const HomePage = ({navigation}) =>{
    const [lastBookTitle, setLastBookTitle] = useState('');

    useEffect(() => {
        const fetchTitle = async () => {
            try {
                const savedTitle = await AsyncStorage.getItem('lastBookTitle');
                if (savedTitle) setLastBookTitle(savedTitle);
            } catch (e) {
                console.log('读取失败:', e);
            }
        };
        fetchTitle();
    }, []);
    
    return(
        // 用lastBookTitle展示内容
    )
};

内容的提问来源于stack exchange，提问作者Neo Kwanele Jama