Question

我正在使用自定义标头，因为文档描述了在native-base中使用标头。当我嵌套堆栈导航时，我在Android上获得了“预期的”先前行为，但在iOS上却没有。尽管在iOS上，我可以从左向右滑动手指，但手指会向后滑动。

以下是一些截图来证明这一点：

Android

单击GO NUMERIC将弹出Route 1，并显示后退箭头，并且自定义标题回调“ previous”是预期的对象。标题也会更改。但是在iOS上，“ Route 1”看起来像这样：

iOS

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

问题是，我该如何获得正确的行为？还是我误会了应该如何在React Navigation中使用自定义标头？

最小代码

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 Navigation自定义标头“上一个”

0 个答案: