滑动时如何在<drawer>上显示我的数组中的内容?

时间:2017-08-02 19:10:36

标签: javascript ios reactjs react-native

我试图找出为什么MatchHistory在我滑动<Drawer/>时无法显示的原因。 list[]数组就是这两个数组。

我正在按照教程进行操作。我猜<List dataArray={list} renderRow={(item)SideMenu.js文件中的问题。

此处有SideMenu.js个文件:

import React, {Component} from 'react';
import { Text, View} from 'react-native';
import {List, ListItem, Header} from 'react-native-elements';
import Container from "native-base/src/theme/components/Container";

export default class SideMenu extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let list = [{
            title: "Match",
            onPress: () => {
                this.props.navigator.replace("Match")
            }
        }, { // 2nd menu item below
            title: "History",
            onPress: () => {
                this.props.navigator.replace("History")
            }
        }];

        return(
            <Container theme={this.props.theme}>
                <Header/>
                <View>
                    <List dataArray={list} renderRow={(item) =>
                        <ListItem button onPress={item.onPress.bind(this)}>
                            <Text>{item.title}</Text>
                        </ListItem>
                    }/>
                </View>
            </Container>
        );
    }
}

此处有AppContainer.js个文件:

import React, {Component} from 'react';
import {Navigator} from 'react-native-deprecated-custom-components';
import Drawer from "react-native-drawer-menu";
import SideMenu from './components/sideMenu';

export default class AppContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toggled: false,
            store: {}, // holds data stores
            theme: null
        }
    }

    toggleDrawer() {
        this.state.toggled ? this._drawer.close() : this._drawer.open();
    }

    openDrawer() {
        this.setState({toggled: true});
    }

    closeDrawer() {
        this.setState({toggled: false});
    }

    renderScene(route, navigator) { // current route you want to change to, instance of the navigator
        switch(route) {
            default: {
                return null;
            }
        }
    }

    // handles how our scenes are brought into view
    configureScene(route, routeStack) {
        return Navigator.SceneConfigs.PushFromLeft; // pushes new scene from RHS
    }

    render() {
        return(
            <Drawer
                ref = {(ref) => this._drawer = ref}
                type = 'default' // controls how menu appears on screen, pushes content to the side
                content = {<SideMenu navigator={this._navigator} theme={this.state.theme}
                />}
                onClose={this.closeDrawer.bind(this)}
                onOpen={this.openDrawer.bind(this)}
                openDrawerOffset={0.9}
            >

            <Navigator
                ref={(ref) => this._navigator = ref}
                configureScene={this.configureScene.bind(this)}
                renderScene={this.renderScene.bind(this)}
            />

            </Drawer>
        );
    }
}

0 个答案:

没有答案