Javascript 反应条件渲染和导航栏

我通过主渲染函数中的state和switch语句控制应用程序屏幕上应显示的组件。我在react native中写这篇文章，但这是一个react结构问题

我还有一个导航栏组件，理想情况下，我只想在用户点击导航栏本身的链接时重新启动导航栏，但我不知道如何设置switch语句来实现这一点，似乎每次都必须根据状态满足的条件重新启动导航栏

我的问题是，有没有一种方法可以让我像下面一样在渲染方法中使用组件的条件渲染，并让组件始终在屏幕顶部渲染，如导航栏？我知道这在像React Router这样的东西上是可能的，但是有没有更好的方法来构造它，而不用像React Router这样的工具或者每次都必须重新启动导航栏组件

从“React”导入React；
从“./GPS/GPS”导入GPS；
从“./主页”导入主页；
从“./Camera/Photo”导入照片；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
此.state={
hasCameraPermission:null，
类型：Camera.Constants.type.back，
currentView:null，
currentImage:null，
导航：“概述”
};
this.updateNavigation=this.updateNavigation.bind（this）；
}
updateNavigation（视图）{//更新视图函数
this.setState（{currentView:view}）；
}
render（）{
const{currentView}=this.state；
开关（当前视图）{
大小写为空：
返回(
);
打破
“全球定位系统”案例：
返回(
this.setState（{currentView:null}}>Back
);
打破
“照相机”案例：
返回(
);
打破
“查看图片”案例：
返回(
);
打破
}
}
}

始终保持渲染尽可能干净

您可以使用&&operator来执行相同的操作，而不是使用switch case。使用&&运算符并检查每个案例，并相应地进行渲染。检查下面的代码以更好地理解

render() {
    const { currentView } = this.state;
    return(
      {currentView == null && (
        <Home updateNav={this.updateNavigation} />
        )}
      {currentView == "GPS" && (
        <View>
          <GPS />
          <Text onPress={() => this.setState({currentView: null})}>Back</Text>
        </View>
        )}

      {currentView == "Camera" && (
        <View>
          <Photo updateNav={this.updateNavigation} />
        </View>
        )}

      {currentView == "viewPicture" && (
        <View>
          <Image source={{uri: this.state.currentImage.uri}} style={{width: this.state.currentImage.width/10, height: this.state.currentImage.height/12}} />
        </View>
        )}
    )

  }

render（）{
const{currentView}=this.state；
返回(
{currentView==null&&(
)}
{currentView==“GPS”&&(
this.setState（{currentView:null}}>Back
)}
{currentView==“摄像机”&&(
)}
{currentView==“viewPicture”&&(
)}
)
}

感谢您的回复！是否有一种方法可以始终在render方法的开始处渲染导航栏组件之类的内容，但不必为每个组件使用&&运算符显式地将其置于条件中？是的，您可以不带任何条件返回导航栏组件，以便始终渲染。我的当前视图值为空，我添加了GPS组件，而不是主视图。我现在编辑了。