Question

其他人似乎都遇到了同样的问题，但我没有提出解决方案。当我嵌套堆栈导航器时，有两个标题。我可以使用{header：null}甚至那个header模式选项来删除嵌套的header。很好的问题是（这是https://github.com/react-navigation/react-navigation/issues/88多次指出的问题），这是根标头。因此，没有可用的后退按钮。如何删除根标头并保留嵌套标头？我可以使用标签栏拉类似的东西。我这样做：

navigatorName.navigationOptions = ({navigation}) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
    tabBarVisible = false;
}
return { tabBarVisible }};

我尝试通过将header设置为null来执行此操作，但它似乎不起作用？有什么建议吗？

编辑：这是我的代码

const BatteryListStackNavigator = createStackNavigator({
BatteryList: BatteryList,
BatteryDetails: BatteryDetailsBottomTabNavigator,
});

const RouteListStackNavigator = createStackNavigator({
RouteList: RouteList,
BatteryList: BatteryListStackNavigator,
});

RouteListStackNavigator.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
    tabBarVisible = false;
}

return {
    tabBarVisible,
};
};

const IndexBottomTabNavigator = createBottomTabNavigator(
{
    Home: Home,
    RouteList: RouteListStackNavigator,
    Alerts: Alerts,
}
);

const AppSwitchNavigator = createSwitchNavigator(
{
    Login: Login,
    Application: IndexBottomTabNavigator,
},
{
    initialRouteName: 'Login',
},
);

如果我这样设置：

const BatteryListStackNavigator = createStackNavigator(
{
    BatteryList: BatteryList,
    BatteryDetails: BatteryDetailsBottomTabNavigator,
},
{
    headerMode: 'none',
},
);

它正在运行中，但是当我回来时它消失了吗？我猜是因为它仍然是根，所以在第三处，后退按钮将您带到第一个...

我正在尝试在我拥有tabBarVisible的地方进行设置。我尝试了header：null，headerMode：“ none”。他们似乎都不在我正在做的navigationsOptions函数中工作。

编辑：我是否应该将第一次堆栈导航后的所有后续标题都设置为none，然后以编程方式基于所有内容设置后退按钮？我想这就是我要做的。

Answer 1

使用this.props.navigation.goBack（）

Answer 2

我决定要做的是将所有各种堆栈导航器都设置为标头：像这样的null

const RouteListStackNavigator = 
createStackNavigator(
{
    RouteList: RouteList,
    BatteryList: BatteryListStackNavigator,
},
{
    navigationOptions: {
        header: null,
    },
},
);

然后在每个屏幕中，我使用了可用的静态navigationOptions。这是我使用的基本布局。

static navigationOptions = ({ navigation }) => {
    return {
        title: 'Battery List',
        headerLeft: (
            <Button
                title="back"
                onPress={() => {

console.log(navigation.state.routeName);

navigation.navigate('RouteList');
                }}
            />
        ),
    };
};

这显然不是理想的选择。如果有人有更好的建议，请告诉我。我将尝试使按钮看起来像本机选项。可能需要一种方法，所以我不必手动设置

navigation.navigate()

分别

每个组件。似乎太容易犯错了。 navigation.goBack（）似乎不起作用，并且您无法从静态方法访问“ this”，因此我认为我将无法访问道具。.

我不会接受这个答案，以防万一有人想出更好的解决方案。

编辑：

我确实设置了它，以便于我

navigation.push.('Screen')

按下

进入下一个屏幕。我可以使用

navigation.pop()

使用静态导航选项方法将我带回到先前的位置。我将很快看到通过在此处添加参数来实现此过程的顺利程度。

当堆栈导航器嵌套在另一个堆栈导航器中时，如何返回？没有出现两个标题？

2 个答案: