React Native + TypeScript跨页面数据传递及状态回传问题

下面是几种适合你场景的解决方案，按复杂度从低到高排序：

方案1：导航参数传递回调函数（简单场景首选） #

如果页面通过React Navigation跳转，直接把setArrange作为回调参数传给第二个页面，在第二个页面触发回调即可修改首页状态。

步骤： #

1. 定义路由参数类型（TypeScript 类型约束）

// 全局路由参数类型定义
type RootStackParamList = {
  Home: undefined;
  SecondPage: {
    onUpdateArrange: (value: boolean) => void;
  };
};

// 扩展React Navigation类型，让TS识别自定义参数
declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

2. 首页跳转时传递回调

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

const HomeScreen = () => {
  const [arrange, setArrange] = useState(false);
  const navigation = useNavigation();

  const goToSecondPage = () => {
    navigation.navigate('SecondPage', {
      onUpdateArrange: setArrange, // 传递状态修改函数作为回调
    });
  };

  return (
    <View>
      <Text>{arrange ? '列表布局' : '网格布局'}</Text>
      <Button title="进入设置页" onPress={goToSecondPage} />
    </View>
  );
};

3. 第二个页面调用回调修改状态

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

const SecondPage = () => {
  const route = useRoute();
  const navigation = useNavigation();
  const { onUpdateArrange } = route.params;

  return (
    <View>
      <Button 
        title="切换布局" 
        onPress={() => onUpdateArrange(prev => !prev)} 
      />
      <Button 
        title="返回首页" 
        onPress={() => navigation.goBack()} 
      />
    </View>
  );
};

方案2：React Context（多页面共享状态场景） #

如果多个页面都需要访问或修改arrange状态，用Context封装状态逻辑更易维护。

步骤： #

1. 创建Context和Provider

// ArrangeContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

type ArrangeContextType = {
  arrange: boolean;
  setArrange: (value: boolean) => void;
};

const ArrangeContext = createContext<ArrangeContextType | undefined>(undefined);

export const ArrangeProvider = ({ children }: { children: ReactNode }) => {
  const [arrange, setArrange] = useState(false);

  return (
    <ArrangeContext.Provider value={{ arrange, setArrange }}>
      {children}
    </ArrangeContext.Provider>
  );
};

// 自定义Hook简化Context调用
export const useArrange = () => {
  const context = useContext(ArrangeContext);
  if (!context) {
    throw new Error('useArrange必须在ArrangeProvider内部使用');
  }
  return context;
};

2. 根组件包裹Provider

// App.tsx
import { ArrangeProvider } from './ArrangeContext';
import { NavigationContainer } from '@react-navigation/native';
import { RootStack } from './RootStack';

const App = () => {
  return (
    <ArrangeProvider>
      <NavigationContainer>
        <RootStack />
      </NavigationContainer>
    </ArrangeProvider>
  );
};

3. 页面中直接使用状态

// 首页组件
import { useArrange } from './ArrangeContext';
import { View, Text, Button } from 'react-native';

const HomeScreen = () => {
  const { arrange } = useArrange();

  return (
    <View>
      <Text>{arrange ? '列表布局' : '网格布局'}</Text>
      <Button title="进入设置页" onPress={() => navigation.navigate('SecondPage')} />
    </View>
  );
};

// 第二个页面组件
import { useArrange } from './ArrangeContext';
import { View, Button } from 'react-native';

const SecondPage = () => {
  const { setArrange } = useArrange();

  return (
    <View>
      <Button 
        title="切换布局" 
        onPress={() => setArrange(prev => !prev)} 
      />
      <Button 
        title="返回首页" 
        onPress={() => navigation.goBack()} 
      />
    </View>
  );
};

方案3：Redux Toolkit（复杂全局状态场景） #

如果应用有大量全局状态需要管理，Redux Toolkit是更规范的选择。

步骤： #

1. 创建状态Slice

// features/arrange/arrangeSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

type ArrangeState = {
  value: boolean;
};

const initialState: ArrangeState = {
  value: false,
};

const arrangeSlice = createSlice({
  name: 'arrange',
  initialState,
  reducers: {
    toggleArrange: (state) => {
      state.value = !state.value;
    },
    setArrange: (state, action: PayloadAction<boolean>) => {
      state.value = action.payload;
    },
  },
});

export const { toggleArrange, setArrange } = arrangeSlice.actions;
export default arrangeSlice.reducer;

2. 配置Store

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import arrangeReducer from './features/arrange/arrangeSlice';

export const store = configureStore({
  reducer: {
    arrange: arrangeReducer,
  },
});

// 定义全局状态和Dispatch类型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

3. 根组件包裹Provider

// App.tsx
import { Provider } from 'react-redux';
import { store } from './store';
import { NavigationContainer } from '@react-navigation/native';
import { RootStack } from './RootStack';

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <RootStack />
      </NavigationContainer>
    </Provider>
  );
};

4. 页面中使用状态

// 首页组件
import { useSelector } from 'react-redux';
import { RootState } from '../store';
import { View, Text, Button } from 'react-native';

const HomeScreen = () => {
  const arrange = useSelector((state: RootState) => state.arrange.value);

  return (
    <View>
      <Text>{arrange ? '列表布局' : '网格布局'}</Text>
      <Button title="进入设置页" onPress={() => navigation.navigate('SecondPage')} />
    </View>
  );
};

// 第二个页面组件
import { useDispatch } from 'react-redux';
import { toggleArrange } from '../features/arrange/arrangeSlice';
import { AppDispatch } from '../store';
import { View, Button } from 'react-native';

const SecondPage = () => {
  const dispatch = useDispatch<AppDispatch>();

  return (
    <View>
      <Button 
        title="切换布局" 
        onPress={() => dispatch(toggleArrange())} 
      />
      <Button 
        title="返回首页" 
        onPress={() => navigation.goBack()} 
      />
    </View>
  );
};

内容的提问来源于stack exchange，提问作者Daniel Sem