React Native change view onPress

Question

I have searched on google but I don't know react.

When I click on the button 'Connexion' I would like to be forwarded to the page About.js.

My app.js :

import React from 'react';
import {View, TextInput, StyleSheet, Text } from 'react-native';
import { Header, Button } from 'react-native-elements';
import About from './component/About';
export default class App extends React.Component {

  render() {
    return (
        <View style={{flex: 1}}>
           
            <Button
                title="CONNEXION"
                buttonStyle={{backgroundColor: "#F1C40F", borderColor: "transparent", marginTop: 20,}}
            />
            
        </View>
    );
  }

}

   

My About.js

import React from 'react';
import {Text, View, StyleSheet } from 'react-native';
export default class About extends React.Component{
    render() {
        return (

            <View style={style.view}>
                <Text style={style.title}> A propos de moi</Text>
                
            </View>
        );
    }
}


});

Answer 1

1. install react-navigation,

yarn add react-navigation

or with npm

npm install --save react-navigation

2. Inside your index.js, import StackNavigator

   import App from './components/app; import About1 from './components/About; import {StackNavigator} from 'react-navigation';

3. Then add below code to the last of index.js

   export default StackNavigator({ Home: {

   screen: App,

   },

   Aboutsss:{ screen: About1, },

});

4. Inside app.js, inside button give,

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

Hope you understand and if any doubt feel free to comment. note:- when I try to install using npm I got some error in windows, but no problem with yarn.

Answer 2

To navigate between the screens you can use stackNavigator.

https://facebook.github.io/react-native/docs/navigation.html