Quantcast
Channel: Why the goBack function doesn't work? React Native - Stack Overflow
Viewing all articles
Browse latest Browse all 2

Answer by Beimar Rojas for Why the goBack function doesn't work? React Native

$
0
0

Here is the new code:

import { NavigationContainer, useNavigationState, useNavigation } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import { Toolbar } from 'react-native-material-ui';import * as React from 'react';import { Platform, StatusBar, StyleSheet, View, Text } from 'react-native';import BottomTabNavigator from '../../navigation/BottomTabNavigator';import LinkingConfiguration from '../../navigation/LinkingConfiguration';import CatHome from '../../screens/subScreens/CatHome';const Stack = createStackNavigator();export default function Navigator() {  return (<View style={styles.container}>      {Platform.OS === 'ios'&& <StatusBar barStyle="dark-content" />}<NavigationContainer linking={LinkingConfiguration}><Stack.Navigator screenOptions={{          headerLeft: null,          headerTitle: props => <SearchBar {...props} />,          headerStyle: {            backgroundColor: '#9acd32',          }        }}><Stack.Screen name="Root" component={BottomTabNavigator} /><Stack.Screen name="CatHome" component={CatHome} /></Stack.Navigator></NavigationContainer></View>  );}function SearchBar (){   const navigation = useNavigation();   //const { navigate } = this.props.navigation;   return(<Toolbar       leftElement= {backOption()}       onLeftElementPress= {()=>navigation.goBack()}       //isSearchActive= {true}       style={{         container: styles.searchBar,       }}       centerElement="DIRECTAPP"       searchable={{         autoFocus: true,         placeholder: 'Buscar',       }}       rightElement={{           menu: {               icon: "more-vert",               iconProps : {                 size: 30,                 color: 'gray',               },               labels: ["Locación", "Contáctanos"]           }               }}       onRightElementPress={ (label) => { console.log(label) }}     />   );}function backOption (){  //const Route=useRoute();  const state = useNavigationState(state => state);  const routeName = (state.routeNames[state.index]);  //console.log(routeName);  if (routeName=='Root') {    return ''  }  else {    return 'arrow-back'  };}const styles = StyleSheet.create({    container: {      flex: 1,      backgroundColor: '#fff',    },    searchBar: {      backgroundColor: '#9acd32',      width: '100%',      shadowOffset:  { width: 1, height: 13},      shadowOpacity: 0.1,    }  });

Viewing all articles
Browse latest Browse all 2

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>