Question

我在Routes.js创建了一个抽屉（react-navigation），我在HamburgerBtn.js中有一个按钮。我希望通过按钮调用按钮，用我的按钮打开抽屉。我不明白如何从路线外进入按钮。

#HamburgerBtn.js;import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
  Text,
  View
} from 'react-native';
import {DrawerNavigator} from 'react-navigation';
import {NavigationActions} from 'react-navigation';

class HamburgerBtn extends Component {
  constructor(props){
    super(props);
    this.state = {
      active: false,
    }
  }
  openControlPanel = () => {
      this.props.navigation.navigate('DrawerOpen'); // open drawer
    };
  render () {
    //onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
    return (
      <View style={styles.hamburgerBtnHome}>
        <Hamburger active={this.state.active}
        type = "arrow"
        color = "black"
        onPress={()=> {this.props.openControlPanel()}}
        />
      </View>
    );
  }
}

export default HamburgerBtn;

- routes.js -

import Connect from './Connect/Connect';
import Setup from './Setup/Setup';
import Update from './Update/Update';
import homePage from './homePage'
import SideMenu from './SideMenu/SideMenu';
import {DrawerNavigator} from 'react-navigation';

openControlPanel = () => {
    this.props.navigation.navigate('DrawerOpen'); // open drawer
  };

export default DrawerNavigator({
  homePage: {
    screen: homePage
  },
  Connect: {
    screen: Connect
  },
  Setup: {
    screen: Setup
  },
  Update: {
    screen: Update
  }
}, {
  contentComponent: SideMenu,
  drawerWidth: 300
});

- homepage.js -

import React, {Component} from 'react';
import {
  Text,
  View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';

class homePage extends Component {
  render () {
    return (
      <View style={{padding: 50}}>
      <Hamburger/>
        <Text>
          HomePage
        </Text>
      </View>
    );
  }
}

export default homePage;

Answer 1

- 汉堡包 -

import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
  Text,
  View
} from 'react-native';
import PropTypes from 'prop-types';
import {NavigationActions} from 'react-navigation';

class HamburgerBtn extends Component {
  constructor(props){
    super(props);
    this.state = {
      active: false,
    }
  }
  onPress = () => {
    this.setState({active: !this.state.active});
    this.props.onPress();
    };
  render () {
    //onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
    return (
      <View style={styles.hamburgerBtnHome}>
        <Hamburger active={this.state.active}
        type = "arrow"
        color = "black"
        onPress={() => this.onPress()}
        />
      </View>
    );
  }
}

export default HamburgerBtn;

- 主页 -

import React, {Component} from 'react';
import {
  Text,
  View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';

class homePage extends Component {
  openControlPanel = () => {
      this.props.navigation.navigate('DrawerOpen'); // open drawer
    };
  render () {
    return (
      <View style={{padding: 50}}>
      <Hamburger onPress={() => this.openControlPanel()} />
        <Text>
          HomePage
        </Text>
      </View>
    );
  }
}

export default homePage;

在新闻发布会上传递道具按钮

1 个答案: