Navigation between screen in react native

user_11911054 0
Viewed 135

So I try to navigate between 2 screens. I created a button on the tab bar(right) but the problem is that it always says that is undefined. Here is the code: 

static navigationOptions = {

    headerTitleStyle: { alignSelf: 'center', },
    title:'Oferte',
    headerStyle: {
      backgroundColor: '#BA272A',
    },
    headerRight: (

     <View style={{paddingRight:11}}>
       <Button
        color="#ff5c5c" title="Tombola"
        onPress={() => this.props.navigation( 'Post', { name: 'Jane'} )}
       />
    </View> 
    ),
    headerTintColor: 'white',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
react-navigation react-native reactjs
3 Answers

Looking at https://reactnavigation.org/docs/4.x/redux-integration/#setparams-from-your-screen, probably you should do:

static navigationOptions = ({navigation}) => ({

headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
  backgroundColor: '#BA272A',
},
headerRight: (

 <View style={{paddingRight:11}}>
   <Button
    color="#ff5c5c" title="Tombola"
    onPress={() => navigation( 'Post', { name: 'Jane'} )}
   />
</View> 
),
headerTintColor: 'white',
headerTitleStyle: {
  fontWeight: 'bold',
},
}}

When using this inside a static property or method it will refer to the class itself and not the instance of the component.

user_54582000

using react-navigation v5 component base api : 

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
     <Button title="navigate" onPress={()=> props.navigate("home")} />
    </View>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
 <Button title="navigate" onPress={()=> props.navigate("details")} />
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

or with old v4 api: 

// Other code for HomeScreen here...


class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

// Other code for App component here...

Inside these components you can asses navigation prop, which consists of helper functions for navigating.Some frequently used one are

  1. naviagtion.navigate("screenName") //navigates to new screen
  2. navigation.goBack() // go backs to previous screen
  3. navigation.push("screen name") // navigates to new screen with stack animation . this only works for stackNavigator
  4. navigation.pop()// navigates to previous screen with stack animation . this only works for stackNavigator
user_100044590

You can use react-native-router-flux (npm install --save react-native-router-flux)

just make one Navigator.js file and define each page you wanted to navigate.

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';

import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';


const Navigator = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial /> 
        <Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
      </Scene>
    </Router>
  );
};

export default Navigator;
now in your App.js file add this:

import Navigator from './src/Navigator.js';

export default class App extends Component<Props> {
render() {
    return (
          <Navigator />
    );
  }
}

now in your login.js when you click on login button write this:

import { Actions } from 'react-native-router-flux';

  onLoginClick() {
    Actions.feedscreen();
  }

Thats it.. happy coding.

user_93904070
Related