为什么我的对象不能显示它的菜单项?
我想弄清楚为什么当我滑动我的<Drawer/>
时,Match
和History
没有出现。我在整个网络中都浏览过很多东西,但找不到与此相关的任何内容。为什么我的对象不能显示它的菜单项?
这里的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>
);
}
}
的例子看一下列表API使用ListItem
react-native-elements
https://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>
);
试过了,它不起作用。 :( – georgecarlin24
我认为你混合了'react- native-elements'和React Native的'ListView'公开的'List'的API。更新了文档中示例的答案 –
这也行不通,我试过了。 – georgecarlin24
我下面的教程和它的使用'dataArray',没有任何问题,工作得很好。 – georgecarlin24
哦,我的错误。你正在使用一些第三方图书馆。试着使用原生ListView。如果没有,那么我无法帮助你。看看库文档:) – lukaleli
好的,谢谢你! – georgecarlin24