双标头堆栈导航react-native

Question

I am using a StackNavigator in react native app. The problem is that in my app, it creates two headers ...

I would like to keep the upper one to go back from the screen. Is it possible without recreate the back button manually ?

Screen:

class CommandsList extends React.Component {
    constructor(props){
        super(props);
    }

    addCommand = () => {
        this.props.navigation.navigate("CreateCommand");
    }

    render() {
        return (
            <SafeAreaView style={{flex:1}}>
                <MyList itemsUrl="http://localhost:9000/commands"/>
                <Button title="Ajouter" onPress={this.addCommand}></Button>
            </SafeAreaView>
        );
    }
}

export default StackNavigator({
    CommandsList : {
        screen : CommandsList,
    },
});

EDIT : App.js

const navigationOptions = ({ navigation }) => ({headerLeft: <Icon name {'chevron-left'}  onPress={ () => { navigation.goBack() }} />})
const RootStack = StackNavigator(
    {
        CommandsList: {
            screen: CommandsList,
        },
        CreateCommand: {
            screen: CreateCommand,
        },
        ListFournisseurs: {
            screen: ListFournisseurs,
        },
        ListAffaires: {
            screen: ListAffaires,
        }
    },
    {
        initialRouteName: 'CommandsList',
        headerMode:'none',
        navigationOptions:{navigationOptions}
    }
);

Answer 1

According to the docs, if you want to disable the header of the StackNavigator , you can apply the config at your StackNavigatorConfig as headerMode: 'none' . It is back propagated from Child to Parent, if Parent is none then Child will also not be rendered.

Therefore for a single header, in your case you should do

export default StackNavigator({
    CommandsList : {
        screen : CommandsList,
    },
}, {
  headerMode: 'none'
});

For the back button in the Parent Stack, you can create a component as

const navigationOptions = ({ navigation }) => ({
    headerLeft: <Icon name={'arrow-left'} //<== Vector Icon Here
     onPress={ () => { navigation.goBack() }} />

const RootStack = StackNavigator(
  RouteConfigs, 
  //... StackNavigatorConfigs,
  navigationOptions
)