它可能在另一个屏幕上打开抽屉布局反应原生?

时间:2017-05-05 04:33:29

标签: react-native

可以在另一个场景中使用onPress打开抽屉布局吗?

这是我的App.js,我将从这个屏幕打开我的抽屉

/**
 * Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import {
AppRegistry, Button,
StyleSheet,
Text,
View
} from 'react-native';
import { Router, Scene, Actions } from 'react-native-router-flux';
import Home from './Scene/Home';
import Login from './Scene/Login';
import Register from './Scene/Register';
import DrawerLayout from './Component/DrawerLayout';
export default class Flux extends Component {
    constructor() {
    super();
    this.openDrawer = this.openDrawer.bind(this);
    }
    openDrawer(){
    this.drawer.openDrawer()
    }
//componentWillUnmount(){Actions.refresh({key: 'drawer', open: false })}
    render() {
    var createRightButton = function() {
        return (
            <View>
                <Button style={{color: 'green'}} title={"Drawer"}    onPress={()=>this.openDrawer()}>
                    +
                </Button>
            </View>
        )};
    return (
        <Router renderRightButton={createRightButton}>
            <Scene key="root">
            <Scene key="drawer" component={DrawerLayout}>
                <Scene key="Main" tabs={true}>
                    <Scene key="home" ref={(_drawer) => this.drawer = _drawer} component={Home} title="Home" initial={true}/>
                    <Scene key="login" component={Login} title="Login" />
                    <Scene key="register" component={Register} title="Register" />
                </Scene>
            </Scene>
            </Scene>
        </Router>
        );
    }

}

const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('Flux', () => Flux);

这是我的drawerlayout.js,我将从其他屏幕打开此布局。可能吗?

import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';
import {Button, DrawerLayoutAndroid, TouchableOpacity, View} from "react- native";

export default class NavigationDrawer extends Component {
   constructor() {
    super();
    this.openDrawer = this.openDrawer.bind(this);
    this.closeDrawer = this.closeDrawer.bind(this);
    }
   openDrawer(){
    this.refs['DRAWER'].openDrawer()
   }
   closeDrawer(){
    this.refs['DRAWER'].closeDrawer()
   }
    // state={
    //     drawerOpen: false,
    //     drawerDisabled: false,
    // };
    // closeDrawer = () => {
    //     this._drawer.close()
    // };
    // openDrawer = () => {
    //     this._drawer.open()
    // };

    render(){
    const state = this.props.navigationState;
    const children = state.children;
    var navigationView = (<View>
        <Button onPress={()=>{this.closeDrawer();Actions.home()}} title={"Home"}>
            Home
        </Button>
        <Button onPress={()=>{this.closeDrawer();Actions.login()}} title={"Login"}>
            Login
        </Button>
        <Button onPress={()=>{this.closeDrawer();Actions.register()}} title={"Register"}>
            Register
        </Button>
    </View>);
    return (
        <DrawerLayoutAndroid
            drawerWidth={300}
            ref={'DRAWER'}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}>
            <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
        </DrawerLayoutAndroid>



    );
    //Actions.refresh({key: 'drawer', open: value => !value });

  }

  }

有人可以帮我吗?

0 个答案:

没有答案