从堆栈导航器反应本机隐藏顶部导航

时间:2019-08-26 08:45:15

标签: react-native react-navigation

我是RN的新手,并且具有以下设置。

                const stackNavBudget = createStackNavigator({
                Budget: {screen: Budget,
                    navigationOptions: {
                        header: null,
                    },
                },
                Details: {screen: Details},
            });

            //hide bottom nav
            stackNavBudget.navigationOptions = ({ navigation }) => {
                let tabBarVisible = true;
                if (navigation.state.index > 0) {
                    tabBarVisible = false;
                }
                return {
                    tabBarVisible,
                };
            };
            const TabNavigatorSub = createBottomTabNavigator({
                Budget: {screen:stackNavBudget,
                    navigationOptions: {
                        header: null,
                        tabBarVisible: true,
                    },
                },
                Transactions:Transactions,
            });

            const TabNavigatorComp = createAppContainer(TabNavigatorSub);

            ///////////////////////////////////////////////////

            const TabNavigator = createMaterialTopTabNavigator({
                Home: OverView,
                Spending: TabNavigatorComp,
                Facilities: Facilities,    
                },
                {
                    tabBarOptions: {
                        scrollEnabled: true
                    },
                });

因此,当我在“详细信息”屏幕中时,我可以隐藏底部导航器,但是我无法隐藏主要的顶部导航器。就像“ tabBarVisible”仅具有最直接的标签导航器视图一样,它是最下面的一个。

层次结构如下

Details page  --> Budget --> Bottom Navigator --> Top Navigator  

当我单击详细信息页面中的项目时。我只想看到堆栈导航器的后退按钮。

不是顶部导航器选项。

2 个答案:

答案 0 :(得分:0)

有两种隐藏标题的方法。您可以在“导航器设置”中使用headermode

 const stackNavBudget = createStackNavigator({
                Budget: {screen: Budget,
                    navigationOptions: {
                        headerMode: 'none',
                    },
                },
                Details: {screen: Details},
            });

或者您可以直接在屏幕上给出价格。

class Budget extends React.Component {
  static navigationOptions = {
    header: null,
  };

  /* render function, etc */
}

答案 1 :(得分:0)

尝试这样

 func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return data.count
}


func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {

    return [row]
}

navigater_page =在App.js中初始化的stacknavigater页面的obj