React Native自定义侧边栏配合Stack Navigator时页面无法显示

不使用drawerNavigator，在App.js中固定常驻侧边导航栏、底部栏，中间内容区根据侧边栏按钮点击切换对应页面，参考布局如下：

按照无navigation prop方式接入React Navigation后，点击侧边栏按钮目标页面已触发render，但无法在屏幕上正常显示。 #

1. 路由注册缺失：当前Stack.Navigator仅注册了HomeScreen一个页面，侧边栏其余按钮对应的页面未加入路由栈配置，无法完成跳转
2. 布局样式错误：对应排查到的「组件已渲染但不显示」问题——内容区父容器设置了alignItems: 'flex-start'，且NavigationContainer未配置占满父容器的flex属性，在RN的flex布局规则下，导航容器实际可视尺寸被压缩为0，导致页面渲染了但看不到
3. 当前页跳转默认无响应：首页按钮点击时本身已经处于HomeScreen路由，Stack导航默认跳转当前激活路由不会触发任何UI变化

1. 补全所有路由注册 #

将侧边栏所有按钮对应的页面全部加入Stack.Navigator配置，同时关闭默认导航头避免占位：

// App.js 中NavigationContainer内的栈配置修改
<NavigationContainer ref={navigationRef}>
  <Stack.Navigator screenOptions={{headerShown: false}}>
    <Stack.Screen name="HomeScreen" component={HomeScreenComponent} />
    <Stack.Screen name="RoutesScreen" component={RoutesScreenComponent} />
    <Stack.Screen name="JobsScreen" component={JobsScreenComponent} />
    <Stack.Screen name="CalendarScreen" component={CalendarScreenComponent} />
    <Stack.Screen name="HistoryScreen" component={HistoryScreenComponent} />
    <Stack.Screen name="InfoScreen" component={InfoScreenComponent} />
  </Stack.Navigator>
</NavigationContainer>

2. 修复内容区布局样式 #

首先修改content容器的样式，移除会阻止子组件拉伸的alignItems: 'flex-start'，同时给NavigationContainer设置flex:1让它占满整个中间内容区：

// App.js 样式表修改
const styles = StyleSheet.create({
  // 其余原有样式保持不变
  content: {
    flex: 9,
    backgroundColor: '#121212',
  },
});

NavigationContainer增加flex样式：

<View style={styles.content}>
  <NavigationContainer ref={navigationRef} style={{flex: 1}}>
    {/* 上述栈配置 */}
  </NavigationContainer>
</View>

3. 补全侧边栏按钮跳转逻辑 #

给SideNav中所有按钮绑定对应路由的跳转事件，示例：

// sideNav.js 中第二个路由按钮
<TouchableOpacity
  style={styles.menuIcon}
  onPress={() => RootNavigation.navigate('RoutesScreen')}
>
  <Svg height={50} width={55}>
    <RoutesSvgIcon></RoutesSvgIcon>
  </Svg>
</TouchableOpacity>

剩余Jobs、Calendar、History、Info按钮按相同方式绑定，替换对应跳转的路由名即可。

4. 优化导航方法兼容性 #

修改RootNavigation.js中的navigate方法，增加容器初始化状态判断、当前路由重复点击处理，避免报错和无响应问题：

import { CommonActions } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();

export function navigate(name, params) {
  // 导航容器未初始化时直接返回，避免报错
  if (!navigationRef.isReady()) return;
  const currentRoute = navigationRef.getCurrentRoute();
  // 点击当前页对应按钮时回到栈顶
  if (currentRoute?.name === name) {
    navigationRef.dispatch(CommonActions.popToTop());
    return;
  }
  navigationRef.current?.navigate(name, params);
}

修改完成后可实现预期效果：

• 侧边栏、底部栏全程常驻，不会随页面切换被卸载
• 点击侧边栏按钮可正常切换中间内容区的页面
• 页面占满中间内容区域，不会出现渲染了但看不到的问题

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