Open Another Screen In React-native

I have this screen in react native import React, { Component } from 'react'; import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,N

Solution 1:

As others pointed out, you have to use an instance of Navigator to transition between screens. Maybe you can have a look at the example apps in the React Native repo. I also find this router package quite easy to set up, and it also includes an example app that you can use as a starting point.

Edit As a simple example using react-native-router-flux, you can edit the Example.js file in the Example directory to look like this:

importReact, {
  Component,
} from'react';
import {
  StyleSheet,
  Text,
  View,
} from'react-native';
importLoginViewfrom'./LoginView';
importHygexListViewfrom'./HygexListView';
import {
  Scene,
  Router,
  Actions,
} from'react-native-router-flux';

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
    alignItems: 'center',
  },
  tabBarStyle: {
    backgroundColor: '#eee',
  },
  tabBarSelectedItemStyle: {
    backgroundColor: '#ddd',
  },
});


// define this based on the styles/dimensions you useconstgetSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
  const style = {
    flex: 1,
    backgroundColor: '#fff',
    shadowColor: null,
    shadowOffset: null,
    shadowOpacity: null,
    shadowRadius: null,
  };
  if (computedProps.isActive) {
    style.marginTop = computedProps.hideNavBar ? 0 : 64;
    style.marginBottom = computedProps.hideTabBar ? 0 : 50;
  }
  return style;
};

classExampleextendsComponent {
  render() {
    return (
      <RoutergetSceneStyle={getSceneStyle}><Scenekey="login"component={LoginView}initial={true}/><Scenekey="hygex"component={HygexListView } /></Router>
    );
  }
}

exportdefaultExample;

Then, in your component's move function, you have to do the following:

move(){
    Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that.

I have not tested the code, so there might be some typos/missing imports/code, but it should give you an idea of what you have to do. }

Solution 2:

You have to implement a Navigator, which is roughly a component that manages all stuff related to screens, and header bar with back button and etc.

As you are a beginner, I suggest you to look at the docs on this link:

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

Sorry for the short answer, I'm on my phone.

Good luck!

Solution 3:

"use strict";

varReact = require("react-native");

var {
    Component,
    StyleSheet,
    Text,
    TextInput,
    TouchableHighlight,
    View,
} = React;

varSecureView = require("./SecureView");

classLoginViewextendsComponent {

    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: ""
        };
    }

    render() {
        return (
            <Viewstyle={styles.container}><Textstyle={styles.title}>
                    Sign In
                </Text><View><TextInputplaceholder="Username"onChange={(event) => this.setState({username: event.nativeEvent.text})}
                        style={styles.formInput}
                        value={this.state.username} />
                    <TextInputplaceholder="Password"secureTextEntry={true}onChange={(event) => this.setState({password: event.nativeEvent.text})}
                        style={styles.formInput}
                        value={this.state.password} />
                    <TouchableHighlightonPress={(this.onSubmitPressed.bind(this))}style={styles.button}><Textstyle={styles.buttonText}>Submit</Text></TouchableHighlight></View></View>
        );
    }

    onSubmitPressed() {
        this.props.navigator.push({
            title: "Secure Page",
            component: SecureView,
            passProps: {username: this.state.username, password: this.state.password},
        });
    }

};

var styles = StyleSheet.create({
    container: {
        padding: 30,
        marginTop: 65,
        alignItems: "stretch"
    },
    title: {
        fontSize: 18,
        marginBottom: 10
    },
    formInput: {
        height: 36,
        padding: 10,
        marginRight: 5,
        marginBottom: 5,
        marginTop: 5,
        flex: 1,
        fontSize: 18,
        borderWidth: 1,
        borderColor: "#555555",
        borderRadius: 8,
        color: "#555555"
    },
    button: {
        height: 36,
        flex: 1,
        backgroundColor: "#555555",
        borderColor: "#555555",
        borderWidth: 1,
        borderRadius: 8,
        marginTop: 10,
        justifyContent: "center"
    },
    buttonText: {
        fontSize: 18,
        color: "#ffffff",
        alignSelf: "center"
    },
});

module.exports = LoginView;

Solution 4:

You have to use navigator. please read the documentation as mentioned below. and if you will need then i will share you my code.

Here is an example: NavigatorExample