无法使用React Native Navigation渲染导航屏幕，堆栈导航器

Question

我想使用我的自定义侧导航栏在React导航中导航（不使用DrawernAvigator为此使用）。我将侧面导航栏和底部栏固定在app.js中，因为它将在所有屏幕中都存在。中间内容区域应按照按钮单击侧面导航栏上加载。

来自文档，即时通知无导航prop 。我遵循本教程，在按钮点击时看不到屏幕。

app.js

render() {
    return (
      <View style={styles.container}>
        <View style={styles.app}>
          <View style={styles.navDrawer}>
            <SideNav></SideNav>
          </View>
          <View style={styles.content}>
            <NavigationContainer ref={navigationRef}>
              <Stack.Navigator>
                <Stack.Screen
                  name="HomeScreen"
                  component={HomeScreenComponent}
                />
              </Stack.Navigator>
            </NavigationContainer>
            {/* <Text style={styles.titleText}>DEMO</Text>
              <Text>STATUS:{this.state.status}</Text>
              <Text>{this.state.message}</Text>
              <Text>Is connected to wifi :{this.state.isWifi}</Text>
              <Text>
              Is Internet Reachable {this.state.isInternetReachable}
              </Text>
              <Button title="Exit lock task" onPress={this.handleLockTask} />
              <Button
              title="Remove device owner"
              onPress={this.handleRemoveDeviceOwner}
            /> */}
          </View>
        </View>
        <View style={styles.bottom}>
          <BottomBar
            roverStatus={this.state.status}
            serverStatus={this.state.isInternetReachable}></BottomBar>
        </View>
      </View>
    );
  }
}
const Stack = createNativeStackNavigator();
const styles = StyleSheet.create({
  container: {
    flex: 5,
  },
  app: {
    flexDirection: 'row',
    flex: 5,
    backgroundColor: '#121212',
  },
  navDrawer: {
    flex: 1,
    alignItems: 'center',
  },
  content: {
    flex: 9,
    alignItems: 'flex-start',
    backgroundColor: '#121212',
  },
  sideContent: {
    flex: 2,
    alignItems: 'flex-end',
    backgroundColor: 'green',
    justifyContent: 'space-evenly',
  },
  bottom: {
    flex: 1,
    backgroundColor: '#121212',
  },
}); 

rootnavigation.js

export const navigationRef = createNavigationContainerRef();
/**To Navigate */
export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

sidenav.js

export default class SideNav extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.menuIcon}
          onPress={() => {
            console.log(RootNavigation.navigationRef.current.getRootState());
            RootNavigation.navigate('HomeScreen', {test: 'hi'});
          }}>
          <Svg height={50} width={55}>
            <HomeSvgIcon></HomeSvgIcon>
          </Svg>
        </TouchableOpacity>

        <TouchableOpacity style={styles.menuIcon}>
          <Svg height={50} width={55}>
            <RoutesSvgIcon></RoutesSvgIcon>
          </Svg>
        </TouchableOpacity>

        <TouchableOpacity style={styles.menuIcon}>
          <Svg height={50} width={55}>
            <JobsSvgIcon></JobsSvgIcon>
          </Svg>
        </TouchableOpacity>

        <TouchableOpacity style={styles.menuIcon}>
          <Svg height={50} width={55}>
            <CalendarSvgIcon></CalendarSvgIcon>
          </Svg>
        </TouchableOpacity>

        <TouchableOpacity style={styles.menuIcon}>
          <Svg height={50} width={55}>
            <HistorySvgIcon></HistorySvgIcon>
          </Svg>
        </TouchableOpacity>

        <TouchableOpacity style={styles.menuIcon}>
          <Svg height={50} width={55}>
            <InfoSvgIcon></InfoSvgIcon>
          </Svg>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-evenly',
  },
  menuIcon: {
    // flex: 1,
    borderRadius: 10,
    opacity: 1,
    borderColor: '#BCBCBC',
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
  text: {
    color: '#FFFFFF',
  },
});

编辑：带有渲染方法中的控制台日志的通知，组件是呈现的，但不是在屏幕上可见

Answer 1

编辑：问题是在样式属性中： AlignItems：'Center'。当那被带走时，导航再次开始工作。

我首先确认您的自定义导航器可与本机堆栈一起使用。本机堆栈使用OS的导航在页面之间导航。这个问题可能在于您的自定义导航器和OS的本机导航器发生冲突。

考虑使用@react-navigation/stack 在此处查看这是否会改变导航的行为。

这是您对。
这是