1

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


});
WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
Raphael Trembleau
  • 11
  • 1
  • 3
  • Can you clarify what your specific error and question are, and what you've tried so far to fix it? Also, please improve the grammar and formatting of your question for readability. Thanks :) – Max von Hippel Feb 19 '18 at 20:11

2 Answers2

3
  1. install react-navigation,

yarn add react-navigation

or with npm

npm install --save react-navigation

  1. Inside your index.js, import StackNavigator

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

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

    export default StackNavigator({ Home: {

    screen: App,

    },

    Aboutsss:{ screen: About1, },

});

  1. 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.

Thomas M K
  • 76
  • 5
0

To navigate between the screens you can use stackNavigator.

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

Alessandro Macanha
  • 711
  • 1
  • 7
  • 20