React Native：绕过Navigator限制实现父组件复用SafeAreaView与ScrollView

我想创建一个父组件来统一包裹所有屏幕组件，把重复的SafeAreaView和ScrollView移到父组件中，简化页面结构。但发现React Navigation的Navigator内部不允许放置View或带样式的元素，当前导航代码如下：

return (
  <NavigationContainer>
    <Navigator>
      {isAuthenticated ? (
        <>
          <Screen options={{headerShown: false}} name={'TabsNavigation'} component={BottomTabsNavigator}/>
          <Screen options={{headerShown: false}} name={'Home'} component={Home}/>
        </>
      ) : (
        <>
          <Screen options={{headerShown: false}} name={'Login'} component={Login}/>
          <Screen options={{headerShown: false}} name={'Register'} component={Register}/>
        </>
      )}
    </Navigator>
  </NavigationContainer>
);

当前每个页面组件的结构都是：

<SafeAreaView style={styles(theme).flex}>
  <ScrollView contentInsetAdjustmentBehavior="automatic">
    <View>
      <Text>Content here</Text>
    </View>
  </ScrollView>
</SafeAreaView>

希望简化为：

<View>
  <Text>Content here</Text>
</View>

步骤1：创建全局布局父组件 #

先写一个GlobalLayout组件，封装通用的SafeAreaView和ScrollView逻辑：

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';

const GlobalLayout = ({ children, theme }) => {
  return (
    <SafeAreaView style={styles(theme).container}>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        {children}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = (theme) => StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme?.backgroundColor || '#fff', // 根据你的主题配置调整
  },
});

export default GlobalLayout;

步骤2：用高阶组件包裹页面组件 #

创建一个高阶组件withGlobalLayout，用来统一给页面组件套上全局布局：

import GlobalLayout from './GlobalLayout';

const withGlobalLayout = (Component) => {
  return (props) => {
    // 这里可以传递theme或其他需要的全局参数
    return (
      <GlobalLayout theme={props.theme}>
        <Component {...props} />
      </GlobalLayout>
    );
  };
};

export default withGlobalLayout;

步骤3：修改导航配置，使用包裹后的组件 #

在导航代码中，把原来的页面组件替换成被withGlobalLayout包裹后的版本：

import withGlobalLayout from './withGlobalLayout';

// 包裹需要应用全局布局的页面
const WrappedHome = withGlobalLayout(Home);
const WrappedLogin = withGlobalLayout(Login);
const WrappedRegister = withGlobalLayout(Register);

// 导航代码更新
return (
  <NavigationContainer>
    <Navigator>
      {isAuthenticated ? (
        <>
          <Screen options={{headerShown: false}} name={'TabsNavigation'} component={BottomTabsNavigator}/>
          <Screen options={{headerShown: false}} name={'Home'} component={WrappedHome}/>
        </>
      ) : (
        <>
          <Screen options={{headerShown: false}} name={'Login'} component={WrappedLogin}/>
          <Screen options={{headerShown: false}} name={'Register'} component={WrappedRegister}/>
        </>
      )}
    </Navigator>
  </NavigationContainer>
);

额外处理：Tab导航中的页面 #

如果BottomTabsNavigator里的页面也需要应用全局布局，同样用withGlobalLayout包裹每个Tab对应的组件即可，比如：

// 假设Tab里有Profile页面
const WrappedProfile = withGlobalLayout(Profile);

// 在BottomTabsNavigator中使用WrappedProfile
<Tab.Screen name="Profile" component={WrappedProfile} />

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