加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-native – 如何使用导航器与本机侧面菜单进行反应?

发布时间:2020-12-15 05:06:51 所属栏目:百科 来源:网络整理
导读:native-side-menu这里是我的代码: /** * Sample React Native App * https://github.com/facebook/react-native */ var React = require('react-native');var SideMenu = require('react-native-side-menu');var { AppRegistry,StyleSheet,Text,View,Naviga
native-side-menu这里是我的代码:
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

 var React = require('react-native');
var SideMenu = require('react-native-side-menu');
var {
  AppRegistry,StyleSheet,Text,View,Navigator,} = React;

var ContentView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
});

var TestView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to another page.
        </Text>
        <Text style={styles.instructions}>
          Testing react native side menu with navigator.
        </Text>
      </View>
    );
  }
});

var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
    this.props.navigator.push({
      component: TestView,title: 'Test View',});
  },render: function() {
    return (
      <View style={styles.sidemenu}>
        <Text style={styles.paddingMenuItem}>Menu</Text>
        <Text onPress={this.about} style={styles.paddingMenuItem}>About</Text>
      </View>
    );
  }
});

var FindWisely = React.createClass({
  render: function() {
    return (
      <Navigator
       initialRoute={{
         component: Something,title: 'Something',}}
       configureScene={() => {
         return Navigator.SceneConfigs.FadeAndroid;
       }}
       renderScene={(route,navigator) => {
         if(route.component) {
           return React.createElement(route.component,{ navigator });
         }
       }}/>
    );
  }
});

var Something = React.createClass({
  render: function() {
    var menu = <Menu navigator={this.props.navigator}/>;
    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,sidemenu: {
    paddingTop: 50,paddingMenuItem: {
    padding: 10,});

module.exports = FindWisely;

当我运行这个时,我得到:

an error undefined is not an object (evaluating ‘this.props.menuActions.close’)

在这种情况下,menuActions未定义.
要解决此问题,您可以将其作为道具传递给< Menu />复合材料.

例如:var menu =< Menu navigator = {this.props.navigator} menuActions = {menuActions} /&gt ;; 其中menuActions应定义close函数. 可选地,您可以使用isOpen来切换具有状态的侧边菜单. 使用< SideMenu menu = {menu} isOpen = {this.state.isOpen}>并使用this.setState({isOpen:false})替换this.props.menuActions.close()以关闭侧边菜单.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读