Question

我花了两天时间试图使用react native的基础来使侧边栏工作。

我使用的是我在React Native基本网站（https://docs.nativebase.io/Components.html#Drawer）上看到的示例

侧边栏正在运行（打开）。但是在侧边栏上有一种模式。边栏不会变成白色。天色变暗，好像它在应该放置的地方一样。

看两张图片

我不知道该怎么办。有谁知道如何使此侧边栏菜单起作用？这是我正在使用的代码

App.js

import React, { Component } from 'react'
import { Text } from 'react-native'
import { Header, Left, Button, Icon, Right, Body, Title, Drawer } from 'native-base'
import SideBar from './src/components/SideBar'

export default class AppHeader extends Component {
  closeDrawer() {
    this.drawer._root.close()
  }
  openDrawer() {
    this.drawer._root.open()
  }
  render() {
    return (
      <Drawer
       ref={(ref) => { this.drawer = ref; }}
        content={<SideBar />}
        onClose={() => this.closeDrawer()}
      >
        <Header>
          <Left>
            <Button transparent onPress={() => this.openDrawer()}>
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>Title</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name="bulb" />
            </Button>
          </Right>
        </Header>
      </Drawer>
    )
  }
}
module.exports = AppHeader

SideBar.js

import React, { Component } from 'react';
import { Text } from 'react-native';

import {Content} from 'native-base';

export default class SideBar extends Component {
  render() {
    return (
          <Content style={{backgroundColor:'#FFFFFF'}}>
            <Text>Side Bar</Text>
          </Content>
    );
  }
}

module.exports = SideBar;

Answer 1

尝试将容器标记插入Sidebar.class内：

export default class SideBar extends Component {
  render() {
    return (
        <Container>
          <Content style={{backgroundColor:'#FFFFFF'}}>
            <Text>Side Bar</Text>
          </Content>
        </Container>
    );
  }
}

或者，您可以尝试遵循（就像我一样）NativeBaseKitchenSink的结构：https://github.com/GeekyAnts/NativeBase-KitchenSink

React native Base-侧边栏在屏幕下方打开

1 个答案: