user7381435
user7381435

Reputation: 37

Navigation in react-native

This's the homepage

What I want is when i click on the clock icon at the BottomTabNavigator, i have a new page with the features below:

Is there someone who can help me ?

"dependencies": {
    "expo": "^31.0.2",
    "react": "16.5.0",
    "react-elements": "^1.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-native-snap-carousel": "^3.7.5",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^3.0.0"
  },

**CODE : **

//Differents Stack Navigators
const AppStackNavigator = createAppContainer(createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      header: < Head / >
    }
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: "Rechercher",
      headerStyle: {
        backgroundColor: '#00aced'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      }
    }
  }
}));

const HoraireStackNAvigator = createAppContainer(createStackNavigator({
  Horaire: {
    screen: Horaires,
    navigationOptions: {
      title: "Horaires"
    }
  }
}))

const PaimentStackNAvigator = createAppContainer(createStackNavigator({
  Horaire: {
    screen: Paiement
  }
}))


//The Principle TabNavigator
const TabContainer = createBottomTabNavigator({
  Home: {
    screen: AppStackNavigator,
  },
  Paiement: {
    screen: PaimentStackNAvigator,
  },
  Horaires: {
    screen: HoraireStackNAvigator,
    navigationOptions: {
      tabBarVisible: false
    }
  }
}, {
  initialRouteName: 'Home',
  order: ['Paiement', 'Horaires', 'Home', 'Proximite', 'Settings'],

  //Default Options for the bottom Tab
  defaultNavigationOptions: ({
    navigation
  }) => ({
    tabBarIcon: ({
      focused,
      horizontal,
      tintColor
    }) => {
      const {
        routeName
      } = navigation.state;
      let iconName;
      if (routeName === 'Home') {
        iconName = `ios-home${focused ? '' : ''}`;
      } else if (routeName === 'Settings') {
        iconName = `ios-settings${focused ? '' : ''}`;
      } else if (routeName === 'Horaires') {
        iconName = `ios-clock${focused ? '' : ''}`;
      } else if (routeName === 'Proximite') {
        iconName = `ios-locate${focused ? '' : ''}`;
      } else if (routeName === 'Paiement') {
        iconName = `ios-cart${focused ? '' : ''}`;
      }
      return <Ionicons name = {
        iconName
      }
      size = {
        horizontal ? 20 : 35
      }
      color = {
        tintColor
      }
      />;
    }
  }),
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
    tabStyle: {
      backgroundColor: '#000'
    },
    showLabel: false,
    showIcon: true
  }
})

export default AppTabNavigator = createAppContainer(TabContainer);

Upvotes: 0

Views: 193

Answers (1)

Jatin parmar
Jatin parmar

Reputation: 444

React navigation stack provide default go back option its usually based on your stack. close active screen and move back in the stack using

this.props.navigate("goBack")

this.props.navigate.pop("HomeScreen")

We can also push or navigate to HomeScreen by using

this.props.navigate.navigate("HomeScreen")

this.props.navigate.push("HomeScreen")

Upvotes: 1

Related Questions