Question

我试图找出每当我滑动Match时History和<Drawer/>没有出现的原因。我在整个网络上看了很多，但是找不到与此有关的任何内容。

这是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>
        );
    }
}

Answer 1

首先，dataArray组件中没有ListView这样的属性。您需要先创建数据源并将其传递给dataSource属性。请查看DOCUMENTATION

中的示例

Answer 2

查看react-native-elements https://react-native-training.github.io/react-native-elements/API/lists/

的列表API

使用ListItem的示例正在使用title道具来设置标题。也许尝试从SideMenu渲染

返回

return(
        <Container theme={this.props.theme}>
            <Header/>
            <View>
                <List>
                  {
                     list.map((item, i) => (
                        <ListItem onPress={item.onPress} key={i} title={item.title}/>
                     ))
                  }
                </List>
            </View>
        </Container>
    );

为什么我的对象不会显示其菜单项？

2 个答案: