Javascript “反应导航自定义标题”；“以前的”；嵌套堆栈导航器时未定义_Javascript_React Native_React Navigation_React Navigation Stack_React Navigation Drawer

Javascript “反应导航自定义标题”；“以前的”；嵌套堆栈导航器时未定义

javascript react-native

Javascript “反应导航自定义标题”；“以前的”；嵌套堆栈导航器时未定义,javascript,react-native,react-navigation,react-navigation-stack,react-navigation-drawer,Javascript,React Native,React Navigation,React Navigation Stack,React Navigation Drawer,我使用的是一个自定义头，正如文档中描述的在native base中使用头一样。当我嵌套堆栈导航时，我在Android上获得了“预期”的先前行为，但在iOS上没有。虽然在iOS上，我可以从左向右滑动手指，它会返回以下是一些屏幕截图来演示这一点： Android 单击GO NUMERIC将弹出Route 1，返回箭头显示，在自定义标头回调上，“previous”是预期的对象。标题也会改变。但是，在iOS上，“路由1”如下所示： iOS 标题保持不变，“previous”未定义，因此后退箭头永

我使用的是一个自定义头，正如文档中描述的在native base中使用头一样。当我嵌套堆栈导航时，我在Android上获得了“预期”的先前行为，但在iOS上没有。虽然在iOS上，我可以从左向右滑动手指，它会返回

以下是一些屏幕截图来演示这一点：

Android

单击GO NUMERIC将弹出Route 1，返回箭头显示，在自定义标头回调上，“previous”是预期的对象。标题也会改变。但是，在iOS上，“路由1”如下所示：

iOS

标题保持不变，“previous”未定义，因此后退箭头永远不会显示。这几乎就好像忽略了“headerShown”选项

所以问题是，我如何获得正确的行为，或者我是否误解了我应该如何将自定义标题与React导航一起使用

最小代码

import React from 'react';

import { View, Left, Body, Title, Icon, Button, Text, Header, Right } from "native-base";

import { createStackNavigator } from '@react-navigation/stack';

const Stack1 = createStackNavigator();
const Stack2 = createStackNavigator();

const headerScreenOptions = {
    'header' : ( { scene, previous, navigation } ) => {
      const { options } = scene.descriptor;

      const title =
        options.headerTitle !== undefined
          ? options.headerTitle
          : options.title !== undefined
          ? options.title
          : scene.route.name;

      console.log( "We have a previous", previous );

      return (
        <Header>
          <Left>
            {previous ? 
            <Button
              transparent
              onPress={()=>{
                console.log( "Going back" );
                navigation.goBack();
            }}>
              <Icon name="arrow-back" />
            </Button> : null}
           </Left>

           <Body>{title ? <Title>{title}</Title> : null}</Body>
           <Right></Right>
        </Header>
      );
    }
};

function Route1() {
    return(
        <View>
            <Text>Route 1</Text>
        </View>
    );

}

function NumericRoute() {
    return(
        <Stack2.Navigator>
            <Stack2.Screen name="Route1" component={Route1} options={{ ...headerScreenOptions, 'title' : "Route 1" }} />
        </Stack2.Navigator>
    );
}

function RouteA( { navigation } ) {
    return(
        <View>
            <Button onPress={()=>navigation.navigate( "NumericRoute", { 'screen' : "Route1" } )}><Text>Go Numeric</Text></Button>
        </View>
    );
}

/**
 * Container
 */
export default function() {
    return(
        <Stack1.Navigator>
            <Stack1.Screen name="RouteA" component={RouteA} options={{ ...headerScreenOptions, 'title' : "Route A" }} />
            <Stack1.Screen name="NumericRoute" component={NumericRoute} options={{ 'headerShown' : false }} />
        </Stack1.Navigator>
    );
}

从“React”导入React；
从“本机基础”导入{View，Left，Body，Title，Icon，Button，Text，Header，Right}；
从'@react navigation/stack'导入{createStackNavigator}；
const Stack1=createStackNavigator（）；
const Stack2=createStackNavigator（）；
const HeaderScreen选项={
'header'：（{scene，previous，navigation}）=>{
const{options}=scene.descriptor；
常数标题=
options.headerTitle！==未定义
？选项。标题
：options.title！==未定义
？选项。标题
：scene.route.name；
log（“我们有一个上一个”，上一个）；
返回(
{以前的？
{
console.log（“返回”）；
navigation.goBack（）；
}}>
：null}
{title？{title}:null}
);
}
};
函数Route1（）{
返回(
一号干线
);
}
函数numericute（）{
返回(
);
}
函数RouteA（{navigation}）{
返回(
导航（“NumericRoute”，{‘屏幕’：“Route1”}）}>Go Numeric
);
}
/**
*容器
*/
导出默认函数（）{
返回(
);
}