React Native状态变更时，如何向初始页面传递权限状态参数？

方法一：直接通过组件props传递权限状态 #

这种方式简单直接，利用React的props传递机制，权限状态更新时会自动同步到PermissionsPage。

修改导航代码里的PermissionsScreen配置：

<Stack.Screen
  options={{headerShown: false}}
  name="Permissions"
  // 直接将权限状态作为props传入组件
  children={() => (
    <PermissionsPage 
      cameraPermission={cameraPermission}
      microphonePermission={microphonePermission}
    />
  )}
/>

为避免PermissionsPage因父组件重渲染产生不必要刷新，可给组件加上React.memo优化：

// 在PermissionsPage组件文件中
import React from 'react';

const PermissionsPage = React.memo(({ cameraPermission, microphonePermission }) => {
  // 组件业务逻辑
});

export default PermissionsPage;

方法二：用React Context全局管理权限状态 #

如果后续多个页面需要用到权限状态，这种方式能避免props层层传递的冗余问题。

1. 创建权限状态Context：

// src/contexts/PermissionContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';
import { Platform } from 'react-native';
import { check, PERMISSIONS } from 'react-native-permissions';

const PermissionContext = createContext();

export function PermissionProvider({ children }) {
  const [cameraPermission, setCameraPermission] = useState("unavailable");
  const [microphonePermission, setMicrophonePermission] = useState("unavailable");

  useEffect(() => {
    const checkPermissions = async () => {
      if (Platform.OS === 'ios') {
        const cameraResult = await check(PERMISSIONS.IOS.CAMERA);
        const micResult = await check(PERMISSIONS.IOS.MICROPHONE);
        setCameraPermission(cameraResult);
        setMicrophonePermission(micResult);
      } else if (Platform.OS === 'android') {
        const cameraResult = await check(PERMISSIONS.ANDROID.CAMERA);
        const micResult = await check(PERMISSIONS.ANDROID.RECORD_AUDIO);
        setCameraPermission(cameraResult);
        setMicrophonePermission(micResult);
      }
    };

    checkPermissions();
  }, []);

  return (
    <PermissionContext.Provider value={{ cameraPermission, microphonePermission }}>
      {children}
    </PermissionContext.Provider>
  );
}

export function usePermissions() {
  return useContext(PermissionContext);
}

2. 在App.tsx中包裹Provider：

import AppNavigation from './navigation/appNavigation';
import { PermissionProvider } from './contexts/PermissionContext';

function App() {
  return (
    <PermissionProvider>
      <AppNavigation />
    </PermissionProvider>
  );
}

export default App;

3. 在PermissionsPage中读取Context状态：

// src/screens/Permission.js
import React from 'react';
import { usePermissions } from '../contexts/PermissionContext';

const PermissionsPage = () => {
  const { cameraPermission, microphonePermission } = usePermissions();

  // 直接使用最新权限状态开发页面逻辑
  return (
    // 页面内容
  );
};

export default PermissionsPage;

4. 简化AppNavigation中的状态逻辑：

// 移除原有的useState和useEffect权限检查代码
export default function AppNavigation() {
  const { cameraPermission, microphonePermission } = usePermissions();

  console.log(
    `Re-rendering Navigator. Camera: ${cameraPermission} | Microphone: ${microphonePermission}`,
  );

  if (cameraPermission === "unavailable" || microphonePermission === "unavailable") {
    // 权限状态仍在加载时返回空
    return null;
  }

  const showPermissionsPage = cameraPermission !== "granted" || microphonePermission !== "granted";

  return (
    <NavigationContainer>
       <Stack.Navigator
        initialRouteName={showPermissionsPage ? 'Permissions' : 'Home'} >
        // 其他Screen配置保持不变
        <Stack.Screen
          options={{headerShown: false}}
          name="Permissions"
          component={PermissionsPage}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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