2017-06-21 94 views
1

我是反应原生的初学者。我正在使用NativeBase组件进行设计。当我使用抽屉的应用程序给这个错误未定义不是函数(评估'_this2.closeDrawer()')在反应本机应用程序中的错误

undefined is not a function (evaluating '_this2.closeDrawer()') 

这是错误的截图

enter image description here

抽屉代码是在这里

import React, { Component } from 'react'; 
import { Drawer } from 'native-base'; 
import SideBar from './sidebar'; 
import Signup from './signup'; 
import { View } from 'react-native'; 

export default class NativeDrawer extends Component { 
    render() { 
    closeDrawer =() => { 
     this.drawer._root.close() 
    }; 
    openDrawer =() => { 
     this.drawer._root.open() 
    }; 
    return (
     <View> 

     <Drawer 
      ref={(ref) => { this.drawer = ref; }} 
      content={<SideBar navigator={this.navigator} />} 
      onClose={() => this.closeDrawer()} > 
     </Drawer> 
     </View> 
    ); 
    } 
} 

侧边栏的代码是在这里

import React, { Component } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 

export default class SideBar extends Component { 
    render() { 

     return (
      <View style={styles.container} > 
       <Text> 
        Hello World 
       </Text> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#fff', 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 
}); 

其他NativeBase组件工作,但抽屉被给了一个错误

回答

6

您通过使用参考this.closeDrawer设置道具onClose<Drawer>组件。

这将在您的组件上寻找closerDrawer的定义,但您已在render方法中定义了它。

定义closeDrawer在组件的范围应该解决您的问题(注:我也感动openDrawer出来的渲染以及):

export default class NativeDrawer extends Component { 
    // Moved outside of render: 
    closeDrawer =() => { 
     this.drawer._root.close() 
    }; 

    openDrawer =() => { 
    this.drawer._root.open() 
    }; 

    render() { 

    return (
     <View> 
     <Drawer 
      ref={(ref) => { this.drawer = ref; }} 
      content={<SideBar navigator={this.navigator} />} 
      onClose={() => this.closeDrawer()} > 
     </Drawer> 
     </View> 
    ); 
    } 
} 
+0

使用此工作后,但没有显示任何东西,只显示一个白色屏幕 – Bikash

+0

@Bikash:如果你有类似的问题,并希望有一些洞察力,这里还没有澄清,你可以尝试张贴关于你的问题的问题提出与您的问题有关的具体问题。 – Pineda

1

最简单:只需去掉“这一点。”在closeDrawer()前面

我正在运行相同的示例代码,并为我解决了它!

相关问题