如何自定义headerLeft React Navigation？

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 组件。您可以实现它并使用它来覆盖后退按钮样式，按下道具，例如： 链接到 docs

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

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。查看docs for 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中 在下面的示例中，为使图标正常工作，请使用“ 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>

        ),
    });
}