如何自定义 headerLeft React 导航？

Question

如何自定义React Navigation的headerLeft TabNavigator。
这是我的屏幕之一：

我想从

Back

中删除

headerLeft

可能吗？
这是我的代码：

DetailTabs = TabNavigator({
DetailResult:{
    screen:DetailResult,
    navigationOptions:{
        title:'Detail Penginapan',
        headerTitleStyle:{
            fontSize:14,
            textAlign: "center",
            flex: 1,
        },
        tabBarVisible: false,
        headerStyle:{
            backgroundColor:'#4A94FB',
            borderBottomColor: 'transparent',
        },
        headerTintColor: 'white'
    }
}
})

Answer 1

默认使用 HeaderBackButton 组件。您可以实现它并使用它来覆盖后退按钮样式，按 props，例如： 链接到文档

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

//in newer versions use:
//import {HeaderBackButton} from '@react-navigation/elements';

const styles = StyleSheet.create({
  custom: {
  // Custom styles here
  }
});

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <HeaderBackButton
        {...props}
        style={styles.custom}
        onPress={() => {
        // Do something
        }}
      />
    ),
  }}
/>;

如果您想要完全控制，您可以使用自定义后退按钮组件，例如：

import { CustomBackButton } from 'path/to/custom/component';

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <CustomBackButton {...props} />
    ),
  }}
/>;

Answer 2

您可能只需将

headerBackTitle

设置为

null

。查看 headerLeft 的 文档 了解更多信息。

像这样：

DetailTabs = TabNavigator({
DetailResult:{
    screen:DetailResult,
    navigationOptions:{
        title:'Detail Penginapan',
        headerTitleStyle:{
            fontSize:14,
            textAlign: "center",
            flex: 1,
        },
        tabBarVisible: false,
        headerStyle:{
            backgroundColor:'#4A94FB',
            borderBottomColor: 'transparent',
        },
        headerTintColor: 'white',
        headerBackTitle: null,
    }
}
})

Answer 3

关键是将此代码放在单击后退按钮的位置，而不是放在 App.js 中 在下面的示例中，要使 Icon 正常工作，请使用 import Icon from 'react-native-vector-icons/Feather';

constructor(props) {
    super(props);
    this.state = {
    // what ever
    };

    this.props.navigation.setOptions({
        headerLeft: () => (
            <TouchableOpacity                
            onPress={() => this.props.navigation.navigate('Home')}
        >
         <Icon style = {{paddingLeft : 10}} name="arrow-left" size={26} color="black" />
        </TouchableOpacity>

        ),
    });
}

Answer 4

我们可以通过定位页面标题来自定义标题图标。

 useEffect(() => {
    navigation.setOptions({
      title: "hello",
      headerStyle: {
        backgroundColor: "#f4511e",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        alignItems: "center",
        fontWeight: "bold",
      },
      headerLeft: () => (
       <Button onPress={handleBackPress}>
         <ArrowLeftCircleIcon className="h-36" size={30} color="black" />
       </Button>
      ),
    });
  }, [navigation]);