How to add a button on the header ? (React Native)

up vote
0
down vote

favorite

How to add a button on the header bar at the top right?
I would like that button opens my page "Parametres" ?

(I don't want my "Parametres" page to be on the bottom tab.)

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={

        Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

      }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

    />),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

    />),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

This is my "MainTabNavigator.js" page.
I am novice, any help would be very appreciated.

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

asked Nov 21 at 18:50

Lylys

267

add a comment |

up vote
0
down vote

favorite

How to add a button on the header bar at the top right?
I would like that button opens my page "Parametres" ?

(I don't want my "Parametres" page to be on the bottom tab.)

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={

        Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

      }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

    />),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

    />),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

This is my "MainTabNavigator.js" page.
I am novice, any help would be very appreciated.

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

asked Nov 21 at 18:50

Lylys

267

add a comment |

up vote
0
down vote

favorite

How to add a button on the header bar at the top right?
I would like that button opens my page "Parametres" ?

(I don't want my "Parametres" page to be on the bottom tab.)

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={

        Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

      }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

    />),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

    />),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

This is my "MainTabNavigator.js" page.
I am novice, any help would be very appreciated.

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

asked Nov 21 at 18:50

Lylys

267

How to add a button on the header bar at the top right?
I would like that button opens my page "Parametres" ?

(I don't want my "Parametres" page to be on the bottom tab.)

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={

        Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

      }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

    />),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

    />),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

This is my "MainTabNavigator.js" page.
I am novice, any help would be very appreciated.

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={

        Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

      }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

    />),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

    />),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={

        Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

      }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

    />),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

    <TabBarIcon

      focused={focused}

      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

    />),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

javascript react-native tabs react-navigation navigationbar

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

asked Nov 21 at 18:50

Lylys

267

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

asked Nov 21 at 18:50

Lylys

267

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

edited Nov 21 at 22:07

Cristian Gomez

1,3341926

asked Nov 21 at 18:50

Lylys

267

asked Nov 21 at 18:50

Lylys

267

asked Nov 21 at 18:50

Lylys

267

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

You need to add the header button to navigationOptions

You may do it this way:

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

headerRight: <Button

    onPress={() => this.props.navigation.navigate('Parametres')}

    title="Parameters"

    color="#fff"

/>,

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={

    Platform.OS === 'ios'

      ? `ios-information-circle${focused ? '' : '-outline'}`

      : 'md-information-circle'

  }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

/>),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

/>),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

Note: I'm assuming you're route name is Parametres

edited 2 days ago

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

Thank you but the text is underlined in red I have some text error on your code.. :/
– Lylys
2 days ago

Care to share the error?
– Cristian Gomez
2 days ago

NVM I saw the problem, try again. edited my response.
– Cristian Gomez
2 days ago

there is no more code error but no button appears..
– Lylys
2 days ago

add a comment |

up vote
0
down vote

Try this:

const HomeStack = createStackNavigator({

  Home: HomeScreen,

  navigationOptions: ({ navigation }) => ({

    headerRight: (

      <Button

        title="Parametres"

        onPress={() => navigation.navigate('Parametres')}

      />

    ),

    tabBarLabel: 'Home',

    tabBarIcon: ({ focused }) => (

      <TabBarIcon

        focused={focused}

        name={

          Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

        }

      />

    ),

  }),

});

You could remove the HomeStack.navigationOptions with this

answered 2 days ago

kivul

16211

just remove HomeStack and HomeStack.navigationOptions from your code and replace with mine
– kivul
2 days ago

There is no button that appears, the only thing is that the HomeStack button has disappeared from my bar tab.
– Lylys
2 days ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418756%2fhow-to-add-a-button-on-the-header-react-native%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

You need to add the header button to navigationOptions

You may do it this way:

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

headerRight: <Button

    onPress={() => this.props.navigation.navigate('Parametres')}

    title="Parameters"

    color="#fff"

/>,

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={

    Platform.OS === 'ios'

      ? `ios-information-circle${focused ? '' : '-outline'}`

      : 'md-information-circle'

  }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

/>),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

/>),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

Note: I'm assuming you're route name is Parametres

edited 2 days ago

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

Thank you but the text is underlined in red I have some text error on your code.. :/
– Lylys
2 days ago

Care to share the error?
– Cristian Gomez
2 days ago

NVM I saw the problem, try again. edited my response.
– Cristian Gomez
2 days ago

there is no more code error but no button appears..
– Lylys
2 days ago

add a comment |

up vote
0
down vote

You need to add the header button to navigationOptions

You may do it this way:

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

headerRight: <Button

    onPress={() => this.props.navigation.navigate('Parametres')}

    title="Parameters"

    color="#fff"

/>,

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={

    Platform.OS === 'ios'

      ? `ios-information-circle${focused ? '' : '-outline'}`

      : 'md-information-circle'

  }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

/>),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

/>),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

Note: I'm assuming you're route name is Parametres

edited 2 days ago

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

Thank you but the text is underlined in red I have some text error on your code.. :/
– Lylys
2 days ago

Care to share the error?
– Cristian Gomez
2 days ago

NVM I saw the problem, try again. edited my response.
– Cristian Gomez
2 days ago

there is no more code error but no button appears..
– Lylys
2 days ago

add a comment |

up vote
0
down vote

You need to add the header button to navigationOptions

You may do it this way:

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

headerRight: <Button

    onPress={() => this.props.navigation.navigate('Parametres')}

    title="Parameters"

    color="#fff"

/>,

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={

    Platform.OS === 'ios'

      ? `ios-information-circle${focused ? '' : '-outline'}`

      : 'md-information-circle'

  }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

/>),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

/>),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

Note: I'm assuming you're route name is Parametres

edited 2 days ago

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

You need to add the header button to navigationOptions

You may do it this way:

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

headerRight: <Button

    onPress={() => this.props.navigation.navigate('Parametres')}

    title="Parameters"

    color="#fff"

/>,

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={

    Platform.OS === 'ios'

      ? `ios-information-circle${focused ? '' : '-outline'}`

      : 'md-information-circle'

  }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

/>),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

/>),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

Note: I'm assuming you're route name is Parametres

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

headerRight: <Button

    onPress={() => this.props.navigation.navigate('Parametres')}

    title="Parameters"

    color="#fff"

/>,

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={

    Platform.OS === 'ios'

      ? `ios-information-circle${focused ? '' : '-outline'}`

      : 'md-information-circle'

  }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

/>),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

/>),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

import React from 'react';

import { Platform } from 'react-native';

import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';



import TabBarIcon from '../components/TabBarIcon';

import HomeScreen from '../screens/HomeScreen';

import LinksScreen from '../screens/LinksScreen';

import SettingsScreen from '../screens/SettingsScreen';

import Parametres from '../screens/Parametres';





const HomeStack = createStackNavigator({

  Home: HomeScreen,

});



HomeStack.navigationOptions = {

headerRight: <Button

    onPress={() => this.props.navigation.navigate('Parametres')}

    title="Parameters"

    color="#fff"

/>,

  tabBarLabel: 'Home',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={

    Platform.OS === 'ios'

      ? `ios-information-circle${focused ? '' : '-outline'}`

      : 'md-information-circle'

  }/>),};



const LinksStack = createStackNavigator({

  Links: LinksScreen,

});



LinksStack.navigationOptions = {

  tabBarLabel: 'Linkscreen',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}

/>),};



const SettingsStack = createStackNavigator({

  Settings: SettingsScreen,

});



SettingsStack.navigationOptions = {

  tabBarLabel: 'Settings',

  tabBarIcon: ({ focused }) => (

<TabBarIcon

  focused={focused}

  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}

/>),};



export default createBottomTabNavigator({

  HomeStack,

  LinksStack,

  SettingsStack,

  Parametres,

});

edited 2 days ago

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

edited 2 days ago

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

answered Nov 21 at 20:46

Cristian Gomez

1,3341926

Thank you but the text is underlined in red I have some text error on your code.. :/
– Lylys
2 days ago

Care to share the error?
– Cristian Gomez
2 days ago

NVM I saw the problem, try again. edited my response.
– Cristian Gomez
2 days ago

there is no more code error but no button appears..
– Lylys
2 days ago

add a comment |

Thank you but the text is underlined in red I have some text error on your code.. :/
– Lylys
2 days ago

Care to share the error?
– Cristian Gomez
2 days ago

NVM I saw the problem, try again. edited my response.
– Cristian Gomez
2 days ago

there is no more code error but no button appears..
– Lylys
2 days ago

Thank you but the text is underlined in red I have some text error on your code.. :/
– Lylys
2 days ago

Care to share the error?
– Cristian Gomez
2 days ago

NVM I saw the problem, try again. edited my response.
– Cristian Gomez
2 days ago

there is no more code error but no button appears..
– Lylys
2 days ago

add a comment |

up vote
0
down vote

Try this:

const HomeStack = createStackNavigator({

  Home: HomeScreen,

  navigationOptions: ({ navigation }) => ({

    headerRight: (

      <Button

        title="Parametres"

        onPress={() => navigation.navigate('Parametres')}

      />

    ),

    tabBarLabel: 'Home',

    tabBarIcon: ({ focused }) => (

      <TabBarIcon

        focused={focused}

        name={

          Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

        }

      />

    ),

  }),

});

You could remove the HomeStack.navigationOptions with this

answered 2 days ago

kivul

16211

just remove HomeStack and HomeStack.navigationOptions from your code and replace with mine
– kivul
2 days ago

There is no button that appears, the only thing is that the HomeStack button has disappeared from my bar tab.
– Lylys
2 days ago

add a comment |

up vote
0
down vote

Try this:

const HomeStack = createStackNavigator({

  Home: HomeScreen,

  navigationOptions: ({ navigation }) => ({

    headerRight: (

      <Button

        title="Parametres"

        onPress={() => navigation.navigate('Parametres')}

      />

    ),

    tabBarLabel: 'Home',

    tabBarIcon: ({ focused }) => (

      <TabBarIcon

        focused={focused}

        name={

          Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

        }

      />

    ),

  }),

});

You could remove the HomeStack.navigationOptions with this

answered 2 days ago

kivul

16211

just remove HomeStack and HomeStack.navigationOptions from your code and replace with mine
– kivul
2 days ago

There is no button that appears, the only thing is that the HomeStack button has disappeared from my bar tab.
– Lylys
2 days ago

add a comment |

up vote
0
down vote

Try this:

const HomeStack = createStackNavigator({

  Home: HomeScreen,

  navigationOptions: ({ navigation }) => ({

    headerRight: (

      <Button

        title="Parametres"

        onPress={() => navigation.navigate('Parametres')}

      />

    ),

    tabBarLabel: 'Home',

    tabBarIcon: ({ focused }) => (

      <TabBarIcon

        focused={focused}

        name={

          Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

        }

      />

    ),

  }),

});

You could remove the HomeStack.navigationOptions with this

answered 2 days ago

kivul

16211

Try this:

const HomeStack = createStackNavigator({

  Home: HomeScreen,

  navigationOptions: ({ navigation }) => ({

    headerRight: (

      <Button

        title="Parametres"

        onPress={() => navigation.navigate('Parametres')}

      />

    ),

    tabBarLabel: 'Home',

    tabBarIcon: ({ focused }) => (

      <TabBarIcon

        focused={focused}

        name={

          Platform.OS === 'ios'

          ? `ios-information-circle${focused ? '' : '-outline'}`

          : 'md-information-circle'

        }

      />

    ),

  }),

});

You could remove the HomeStack.navigationOptions with this

answered 2 days ago

kivul

16211

answered 2 days ago

kivul

16211

answered 2 days ago

kivul

16211

answered 2 days ago

kivul

16211

just remove HomeStack and HomeStack.navigationOptions from your code and replace with mine
– kivul
2 days ago

There is no button that appears, the only thing is that the HomeStack button has disappeared from my bar tab.
– Lylys
2 days ago

add a comment |

just remove HomeStack and HomeStack.navigationOptions from your code and replace with mine
– kivul
2 days ago

There is no button that appears, the only thing is that the HomeStack button has disappeared from my bar tab.
– Lylys
2 days ago

just remove HomeStack and HomeStack.navigationOptions from your code and replace with mine
– kivul
2 days ago

There is no button that appears, the only thing is that the HomeStack button has disappeared from my bar tab.
– Lylys
2 days ago

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi