React Native：跨页面点击元素后返回并更新数据的实现方法

嘿，这个场景在React Native开发里太常见了！我给你整理了几个实用的解决方案，你可以根据自己项目的规模和需求来选：

方案1：利用导航返回传参（最适合小型场景） #

这是最直接的方法，不需要额外依赖，靠React Navigation自带的参数传递能力就能搞定。核心思路是：页面1跳转到页面2时，传递一个回调函数；页面2点击元素时，调用这个回调把数据传回去，再返回页面1。

代码示例： #

页面1（Screen1.js）

import { View, Text, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useState } from 'react';

export default function Screen1() {
  const [selectedUser, setSelectedUser] = useState('');
  const navigation = useNavigation();

  const goToScreen2 = () => {
    navigation.navigate('Screen2', {
      // 把更新状态的逻辑封装成回调传给页面2
      onSelectUser: (userName) => {
        setSelectedUser(userName);
      }
    });
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>当前选中用户：{selectedUser || '未选择'}</Text>
      <Button title="跳转到页面2" onPress={goToScreen2} style={{ marginTop: 20 }} />
    </View>
  );
}

页面2（Screen2.js）

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';

export default function Screen2() {
  const route = useRoute();
  const navigation = useNavigation();
  // 从路由参数里拿到页面1传来的回调
  const { onSelectUser } = route.params;

  const handleUserClick = () => {
    // 调用回调，把"Rui martins"传给页面1更新状态
    onSelectUser('Rui martins');
    // 返回页面1
    navigation.goBack();
  };

  return (
    <View style={{ padding: 20, marginTop: 50 }}>
      <TouchableOpacity onPress={handleUserClick} style={styles.userItem}>
        <Text style={styles.userText}>Rui martins</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  userItem: {
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8
  },
  userText: {
    fontSize: 16
  }
});

优点：零额外依赖，逻辑清晰，适合简单的两页面交互场景。

方案2：全局状态管理（适合中大型项目） #

如果你的项目有多个页面需要共享用户数据，或者页面层级比较深，用回调传参就会显得繁琐。这时候可以用Context API或者Redux这类全局状态管理工具，把用户状态存在全局，页面2更新状态后，页面1会自动响应更新。

这里以React自带的Context API为例：

步骤1：创建全局Context #

// UserContext.js
import { createContext, useContext, useState } from 'react';

// 创建Context
const UserContext = createContext();

// 封装Provider组件，提供全局状态
export function UserProvider({ children }) {
  const [selectedUser, setSelectedUser] = useState('');

  return (
    <UserContext.Provider value={{ selectedUser, setSelectedUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 封装自定义Hook，方便组件调用
export function useUser() {
  return useContext(UserContext);
}

步骤2：在App入口包裹导航 #

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { UserProvider } from './UserContext';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <UserProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Screen1">
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </UserProvider>
  );
}

步骤3：页面1订阅状态，页面2更新状态 #

页面1（Screen1.js）

import { View, Text, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useUser } from './UserContext';

export default function Screen1() {
  const { selectedUser } = useUser();
  const navigation = useNavigation();

  return (
    <View style={{ padding: 20 }}>
      <Text>当前选中用户：{selectedUser || '未选择'}</Text>
      <Button title="跳转到页面2" onPress={() => navigation.navigate('Screen2')} style={{ marginTop: 20 }} />
    </View>
  );
}

页面2（Screen2.js）

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useUser } from './UserContext';

export default function Screen2() {
  const navigation = useNavigation();
  const { setSelectedUser } = useUser();

  const handleUserClick = () => {
    // 更新全局状态
    setSelectedUser('Rui martins');
    // 返回页面1
    navigation.goBack();
  };

  return (
    <View style={{ padding: 20, marginTop: 50 }}>
      <TouchableOpacity onPress={handleUserClick} style={styles.userItem}>
        <Text style={styles.userText}>Rui martins</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  userItem: {
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8
  },
  userText: {
    fontSize: 16
  }
});

优点：状态全局共享，不用在页面间层层传递参数，适合中大型项目的复杂状态管理。

方案3：监听页面Focus事件（适合持久化场景） #

如果需要把选中的用户数据持久化（比如重启APP后还能保留），或者页面1需要在每次返回时都刷新数据，可以用AsyncStorage配合页面的focus事件监听。

代码示例： #

页面1（Screen1.js）

import { View, Text, Button } from 'react-native';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { useState, useCallback } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function Screen1() {
  const [selectedUser, setSelectedUser] = useState('');
  const navigation = useNavigation();

  // 监听页面获取焦点的事件，每次回到页面1就读取本地存储的数据
  useFocusEffect(
    useCallback(() => {
      const fetchUser = async () => {
        const storedUser = await AsyncStorage.getItem('selectedUser');
        if (storedUser) setSelectedUser(storedUser);
      };
      fetchUser();
    }, [])
  );

  return (
    <View style={{ padding: 20 }}>
      <Text>当前选中用户：{selectedUser || '未选择'}</Text>
      <Button title="跳转到页面2" onPress={() => navigation.navigate('Screen2')} style={{ marginTop: 20 }} />
    </View>
  );
}

页面2（Screen2.js）

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function Screen2() {
  const navigation = useNavigation();

  const handleUserClick = async () => {
    // 把数据存在本地存储
    await AsyncStorage.setItem('selectedUser', 'Rui martins');
    // 返回页面1
    navigation.goBack();
  };

  return (
    <View style={{ padding: 20, marginTop: 50 }}>
      <TouchableOpacity onPress={handleUserClick} style={styles.userItem}>
        <Text style={styles.userText}>Rui martins</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  userItem: {
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8
  },
  userText: {
    fontSize: 16
  }
});

优点：数据持久化，页面1无需依赖回调或全局状态，每次返回自动刷新。

总结建议： #

• 如果只是简单的两页面交互，优先选方案1，快速高效；
• 如果项目有多个页面共享状态，选方案2，状态管理更统一；
• 如果需要数据持久化，或者页面1需要每次返回都刷新，选方案3。

内容的提问来源于stack exchange，提问作者Bráulio Joelson