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

【问题标题】：Fixed navbar / header between React Native views修复了 React Native 视图之间的导航栏/标题
【发布时间】：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
  })
}

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案1】：

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

【讨论】：