gpt4 book ai didi

android - 在 react native 应用程序中从 native 基础实现抽屉

转载 作者:塔克拉玛干 更新时间:2023-11-02 09:05:40 27 4
gpt4 key购买 nike

我需要使用 native 基础的抽屉来为 android ios 和 android 使用react native 应用程序。这是本地基础的链接 http://nativebase.io/docs/v2.0.0/components#drawer在下面你会找到我的代码:

import { Container, Header, Title, Content, Button, Icon, Left,  Body, Text } from 'native-base';
import { Drawer } from 'native-base';
import SideBar from '../components/SideBar';
class App extends Component {
closeDrawer = () => {
this._drawer._root.close();
}
openDrawer = () => {
alert('open');
this._drawer._root.open();
}
render() {
return (
<Container>
<Header style={{ backgroundColor: '#C0C0C0' }}>
<Left>
<Button transparent onPress={this.openDrawer.bind(this)}>
<Icon style={style.icon} name='menu' />
</Button>
</Left>
<Body style={style.body}>
<Title style={{ color: '#FFF'}}> title </Title>
</Body>
</Header>
<Content>
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar />} >
</Drawer>
</Content>

</Container>
);
}

打开抽屉方法中的警报工作正常,所以我知道这不是按钮中的问题。

最佳答案

我相信你想把抽屉里的所有东西都包起来,就像这样

render() {   
return (
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar />} >
<Container>
<Header style={{ backgroundColor: '#C0C0C0' }}>
<Left>
<Button transparent onPress={this.openDrawer.bind(this)}>
<Icon style={style.icon} name='menu' />
</Button>
</Left>
<Body style={style.body}>
<Title style={{ color: '#FFF'}}> title </Title>
</Body>
</Header>
<Content>
// Your other content here
</Content>
</Container>
</Drawer>
);
}

此外,在您自制的侧边栏组件上 - 确保它具有背景颜色。将其设置为类似 #F0F0F0 的值,否则最终看起来会很奇怪。

关于android - 在 react native 应用程序中从 native 基础实现抽屉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42855674/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com