Question

我试图在我的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' /> )
  }
}

并在页面I之间导航，只需在子组件中使用此方法。

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

Answer 1

真的很愚蠢的解决方案 - 除了由于某种风格问题而无法正确呈现视图外，一切都正常运行。给它＆＃39; flex：1＆＃39;修好了。

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

1 个答案: