我正试图在我的project https://github.com/rt2zz/react-native-drawer中使用这个插件.我可以正确运行这个示例,但在集成它时遇到了问题.

我在方法openDrawer中出错."无法读取未定义的属性抽屉"

我猜我没有以正确的方式定义和使用这个类(我是javascript OOP新手),因为在示例中,它使用了React.createClass({个不同于我的组件作为扩展组件,并具有构造函数.

我班的相关代码如下.

class Search extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
            })
        };
    }

    openDrawer(){
        this.refs.drawer.open()
    }

    getInitialState(){
        return {
          drawerType: 'overlay',

        }
    }

你是谁

render() {
        if (this.state.isLoading) {
            return this.renderLoadingView();
        }

        var controlPanel = <MyControlPanel closeDrawer={() => {this.refs.drawer.close()}} />

        return (


            <View>
                <View style={styles.topBar}>

                    <Drawer
                        ref="drawer"
                        >
                        <MyMainView
                          />
                    </Drawer>

                    <Text style={styles.topBarMenu}>&#9776;</Text>
                    <Text style={styles.topBarTitle}>เงินปันผล</Text>
                    <Text style={styles.topBarRight}></Text>
                </View>

推荐答案

我认为最好还是重新使用createClass.ES6创建类的方式(extends)与createClass相比几乎没有缺点:方法是未绑定的(即"this"不一定指向对象),而且不能使用非常有用的mixin.未绑定的方法是您遇到的问题.如果可以控制调用方法的位置并绑定该方法,也可以解决这个问题(在javascript中查找方法绑定,例如:http://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)

React-native相关问答推荐

元素类型无效:应为字符串

Google SignIn SDK 因抛出错误而失败,发生不可恢复的登录失败 -catch 错误

在选项卡更改时react-navigation

redux-saga:如何以编程方式为yields 创建多个calls/side-effects?

react-native app.js index.js

你如何使 react-native react-navigation 标签栏透明

修复错误:路由 'Home' 的组件必须是 React 组件

如何在 React Native 中获取 TextInput 相对于其父级或屏幕的光标位置

Test suite无法运行 TypeError:Cannot read property ‘default’ of undefined

Xcode 设备不可用,未找到运行时配置文件

可以react native使用jQuery

axios 的网络错误和react-native

INSTALL_FAILED_INSUFFICIENT_STORAGE 运行 npm run android 命令时出错

如何隐藏 React Native NavigationBar

React-Native 最低 Android API 级别

为react-native TextInput 设置边框

react-native-webview :对于 iOS 文本太小

降级 react-native 的适当机制

如何从react-native应用程序打开外部应用程序?

将现有的 React Native 项目转换为 Expo