मैं एक लॉगिन पेज बना रहा हूं। तो मैं islogin के साथ एक राज्य घोषित करता हूँ। अब मैंने एक शर्त की जाँच की। अगर गलत है तो यह लॉगिन पेज लौटाता है अन्यथा यह रूट कंपोनेंट्स को मिल जाएगा।

ऐप.जेएस

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import {AppNavigator} from './route-components/route';
import Login from './Components/login/login'

const AppContainer = createAppContainer(AppNavigator);



export default class App extends React.Component {
  constructor(props){
    super(props)
    this.state ={
      signin: false
    }
  }


  render() {

    if(this.state.signin){
      return (
        <AppContainer />
     );
    } else {
      return (
       <Login islogin={this.state.signin} change={this.change}/>
      )
    }

  }
}

लॉगिन.जेएस

import React from "react";
import { View, Text } from "react-native";
import { Button, WingBlank, WhiteSpace, InputItem } from 'antd-mobile-rn';


export default class Login extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            signin: this.props.islogin
        }
    }

  render(){
    const {change} = this.props;
    return(
        <View style={style}>
            <InputItem  type="text" placeholder="Enter Username"  > 
        </InputItem>
            <WhiteSpace />
            <InputItem  type="text" placeholder="Enter Password" > 
         </InputItem>
            <WhiteSpace />
            <Button style={{margin: 10}} onClick={change}>Login</Button>
        </View>
    )
  }
}

अब जब मैं लॉगिन बटन दबाता हूं तो यह ऐप.जेएस स्थिति बदल देगा और रूट घटक पर स्विच कर देगा

-1
Arnob 16 फरवरी 2019, 08:56

1 उत्तर

सबसे बढ़िया उत्तर

आपको कॉलबैक विधि घोषित करने की आवश्यकता है जो ऐप.जेएस में राज्य चर को बदल देगी और लॉगिन घटक में कॉलबैक विधि पास करेगी और केवल ऑनक्लिक ईवेंट से विधि को कॉल करेगी। यहाँ app.js के लिए एक कोड नमूना है

userLogIn = () => this.setState({ signin: true });
<Login userLogIn={this.userLogIn} change={this.change}/>

और Login.js में बस इसे बदलें

<Button style={{margin: 10}} 
   onClick={this.props.userLogIn}>Login
</Button> 
1
Rajesh Bhartia 16 फरवरी 2019, 09:15