react-native - 当 Stack Navigator 嵌套在另一个 Stack Navigator 中时如何返回？没有两个标题出现？

Question

其他人似乎都遇到了几乎相同的问题，但我还没有想出解决方案。当我嵌套一个堆栈导航器时，有两个标题。我可以使用 { header: null } 甚至那个标题模式选项来删除嵌套标题。那么问题是，（这里已经多次指出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 功能中工作。

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

标签： react-nativereact-navigation

Answer 1

我决定做的是设置所有各种堆栈导航器的标题：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()

在静态导航选项方法中将我带回之前的位置。我将很快看到这个过程在添加参数时有多顺利。