Навигация по-родному - PullRequest
Новая
       31

Навигация по-родному

0 голосов
/ 04 декабря 2018

Это домашняя страница

Что я хочу, так это когда я нажимаю на значок часов в BottomTabNavigator, у меня появляется новая страница со следующими функциями:

  • Навигатор вкладок будет скрыт
  • Новый заголовок

  • возможность вернуться (перейти на домашнюю страницу)

    Я уже исправил две первые точки... Третий сбивает меня с толку!

Кто-нибудь может мне помочь? 

"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"
  },

** КОД: **

//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);

1 Ответ

0 голосов
/ 06 апреля 2019

Реактивный стек навигации предоставляет опцию возврата по умолчанию, обычно это зависит от вашего стека.закройте активный экран и вернитесь в стек, используя

this.props.navigate ("goBack")

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

Мы также можем нажать или перейти к HomeScreen, используя

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

this.props.navigate.push("Домашний экран")

...