【问题标题】:Double header & double mounted main screen - react-navigation双标题和双安装主屏幕 - 反应导航
【发布时间】:2017-09-27 11:30:45
【问题描述】:

这个问题我已经有很长时间了,我只是找不到解决它的答案。
Here is an actual screenshot of what is happening.

问题是:

1. Newsfeed界面默认返回按钮
2. 双头
3. 导航到任何全局屏幕时,TabBar 消失

代码本身:

routes.js

const RecordScreen = StackNavigator({
  Main:   { screen: Record },
  Choose: { screen: RecordChoose },
  Add:    { screen: RecordAdd }
})

const NewsfeedScreen = StackNavigator({
  Main:    { screen: Newsfeed },
  Details: { screen: NewsfeedDetails }
})

export const FriendsScreen = StackNavigator({
  Main: { screen: Friends },
  List: { screen: FriendList }
})

const Tabs = TabNavigator({
  Record:   { screen: RecordScreen },
  Newsfeed: { screen: NewsfeedScreen },
  Friends:  { screen: FriendsScreen }
})

// is it correct to nest TabNavigator with StackNavigator like this?
export const LoggedIn = StackNavigator({
  Main: { screen: Tabs },

  // global Screens
  Gallery:  { screen: Gallery },
  Profile:  { screen: Profile  },
  Settings: { screen: Settings }
})

export const LoggedOut = StackNavigator({
  Welcome: { screen: Welcome },
  SignIn:  { screen: SignIn },
  SignUp:  { screen: SignUp }
})

index.js

import React, { Component } from 'react'
import { LoggedIn, LoggedOut } from '@routes'

class Main extends Component {

  // of course is not exactly like this,
  // just an example
  state = {
    loggedIn: true
  }

  render() {
    return this.state.loggedIn
      ? <LoggedIn />
      : <LoggedOut />
  }
}

感谢任何帮助! 谢谢。

【问题讨论】:

    标签: javascript react-native react-navigation


    【解决方案1】:

    以下更改是否会使事情变得更好?

    来自:

    export const LoggedIn = StackNavigator({
      Main: { screen: Tabs },
    
      // global Screens
      Gallery:  { screen: Gallery },
      Profile:  { screen: Profile  },
      Settings: { screen: Settings }
    })
    

    const doNotShowHeaderOption = {
      navigationOptions: {
        header: null,
      },
    };
    export const LoggedIn = StackNavigator({
      Main: { screen: Tabs, ...doNotShowHeaderOption, },
    
      // global Screens
      Gallery:  { screen: Gallery },
      Profile:  { screen: Profile  },
      Settings: { screen: Settings }
    })
    

    【讨论】:

    • 该死,我在Tabs 组件中添加了这个!哈哈哈非常感谢!!它适用于 1 个问题!我认为另一个错误是库错误(默认情况下为后退按钮)并且导航到全局组件时标签栏消失了
    • 请记住,导航器本身并没有什么特别之处——它就像您的屏幕一样是一个组件,因此许多适用于屏幕的配置选项也适用于导航器
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-07
    • 2018-02-11
    • 1970-01-01
    相关资源
    最近更新 更多