为什么我的对象不能显示它的菜单项?

问题描述:

我想弄清楚为什么当我滑动我的<Drawer/>时,MatchHistory没有出现。我在整个网络中都浏览过很多东西,但找不到与此相关的任何内容。为什么我的对象不能显示它的菜单项?

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

首先有一个在ListView组件没有这样的财产dataArray。您需要先创建数据源并将其传递给dataSource属性。看看在DOCUMENTATION

+0

我下面的教程和它的使用'dataArray',没有任何问题,工作得很好。 – georgecarlin24

+0

哦,我的错误。你正在使用一些第三方图书馆。试着使用原生ListView。如果没有,那么我无法帮助你。看看库文档:) – lukaleli

+0

好的,谢谢你! – georgecarlin24

的例子看一下列表API使用ListItemreact-native-elementshttps://react-native-training.github.io/react-native-elements/API/lists/

例子使用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> 
    ); 
+0

试过了,它不起作用。 :( – georgecarlin24

+0

我认为你混合了'react- native-elements'和React Native的'ListView'公开的'List'的API。更新了文档中示例的答案 –

+0

这也行不通,我试过了。 – georgecarlin24