Question

我最近刚开始使用React本机并坚持使用它。

我想创建一个登录系统，所以我使用条件渲染来根据LoggedInStatus State分别渲染Login Screen和App的主屏幕。

root组件：

    import React, {Component} from 'react'; 
    import { StyleSheet, Platform, Image, Text, View, ActivityIndicator, AsyncStorage } from 'react-native'; 
import firebase from 'react-native-firebase'; import SQLite from 'react-native-sqlite-storage'; import Login from './src/screens/Login'; import Home from './src/screens/Home'; import SplashScreen from 'react-native-smart-splash-screen' var db = SQLite.openDatabase({name: 'test.db', createFromLocation:'~sqlite.db'})


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

      componentWillMount(){
        //SplashScreen.close(SplashScreen.animationType.scale, 850, 500)
         SplashScreen.close({
            animationType: SplashScreen.animationType.fade,
            duration: 450,
            delay: 500,
         })
        db.transaction((tx) => {
              tx.executeSql('SELECT * FROM users', [], (tx, results) => {
                  console.log("Query completed");

                  var len = results.rows.length;
                  console.log(len);
                  if (len > 0) {
                    console.log("User is Logged in");
                    this.setState({ loggedInStatus: true });
                  }
                  else{
                    console.log("User is Logged out");
                    this.setState({ loggedInStatus: false });
                  }
                });
            });   };



      render() {
        if (this.state.loggedInStatus === true) {
          return <Home logoutProp={{ LoggedOut: () => this.setState({ loggedInStatus: false }) }}/>
        }

        else if (this.state.loggedInStatus === false){
          return <Login screenProps={{ isLoggedIn: () => this.setState({ loggedInStatus: true }) }}/>
        }
          return (
            <View>
              <Text>This is SpashScreen</Text>
            </View>
          );   } }

现在，如果用户已登录，则呈现Home组件，Home组件是具有主屏幕和Drawer屏幕的Drawer导航器：

主页组件：

import React from 'react';
import {
  DrawerNavigator,
  StackNavigator,
  TabNavigator
} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import Main from '../src/tabs/Main';
// import Settings from './src/tabs/Settings';
// import Profile from './src/screens/Profile';
import Modal from '../src/screens/Modal';
import Drawer from '../src/components/Drawer';


export default DrawerNavigator({
  Home: {
    screen: Main,
  }
},{
contentComponent: props => <Drawer {...props} />
});

我的抽屉组件有一个注销按钮，我需要调用根组件的logoutProp，点击抽屉组件的注销按钮，我该如何实现呢？

抽屉组件：

  import React, { Component } from 'react';
import {
  Button,
  StyleSheet,
  Text,
  View
} from 'react-native';
import SQLite from 'react-native-sqlite-storage';
var db = SQLite.openDatabase({name: 'test.db', createFromLocation:'~sqlite.db'})
export default class Drawer extends Component {
  constructor(props) {
         super(props);

    }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>

        </View>
        <View style={styles.body}>
          <Button
            title="Log Out"
            onPress={this.logout}

          />
        </View>

      </View>
    );
  }

  logout(){
    //Need some method to call logoutProp of root component

  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',

  },
  header: {
    flex:1,
    backgroundColor: '#1d337d'
  },
  body: {
    flex:3,
  }
});

任何帮助将不胜感激，谢谢：）

React native：如何从子组件改变根组件的状态wihin react-navigaion compoent DrawerNavigator

0 个答案: