修复了 React Native 视图之间的导航栏/标题

Posted 2023-03-14

【中文标题】修复了 React Native 视图之间的导航栏/标题

【英文标题】：Fixed navbar / header between React Native views

【发布时间】：2016-10-29 23:25:35

【问题描述】：

我正在尝试在我的 React Native 应用程序中创建一致的导航栏/标题。

在我的代码当前状态下，整个视图正在交换。工作正常，但导航栏/标题滚动视图（如您所料）看起来有点傻。

有没有办法将导航器视图更改限制为我的代码的某个块，还是我试图以完全错误的方式做到这一点？

我尝试了一些愚蠢的事情，例如将父组件的 Navigator 元素包装在视图中等。

在我的主要父组件中：

render() 
  return (
    <Navigator
      initialRoute = 
        id: 'HomePage'
      
      renderScene=
        this.navigatorRenderScene
      
      configureScene=(route, routeStack) => 
        if (route.sceneConfig) 
          return route.sceneConfig;
        
        return Navigator.SceneConfigs.HorizontalSwipeJump;
      
      
    />
  )


navigatorRenderScene = (route, navigator) => 
  navigator = navigator
  switch (route.id)
    case 'HomePage':
      return( <HomePage navigator=navigator title='HomePage' /> )
    case 'Locations':
      return( <Locations navigator=navigator title='Locations' /> )
  

为了在页面之间导航，我只是在子组件中使用此方法。

onButtonPress() 
  console.log('going to locations')
  this.props.navigator.push(
    id: 'Locations',
    sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump
  )

【参考方案1】：

非常愚蠢的解决方案 - 一切正常，除了由于某种样式问题导致视图无法正确呈现。给它 'flex: 1' 修复它。