Question

我安装了本地base io，并一直使用它来开发react-natvie应用程序。 https://docs.nativebase.io/Components.html#Drawer 我开发了一个包含列表组件的抽屉。但是，我在几件事上有问题，希望有人帮忙。

下面是我到目前为止的代码

import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './SideBar';


import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
export default class AnatomyExample extends Component {

  closeDrawer = () => {
    this._drawer._root.close()
  };

  openDrawer = () => { this._drawer._root.open() };

  render() {
    return (
      <Drawer ref={(ref) => { this._drawer = ref; }} content={<SideBar navigator={this._navigator} />} onClose={() => this.closeDrawer()} >

      <Container>
        <Header>
          <Left>
            <Button transparent onPress={()=> this.openDrawer()}>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header income  mored</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Text>
            This is Content Section test
          </Text>
        </Content>
        <Footer>
          <FooterTab>
            <Button full>
              <Text>FooterJJ</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
      </Drawer> 
    );
  }
}

import React from "react";
import { AppRegistry, Image, StatusBar, Alert } from "react-native";
import { Container, Content, Text, List, ListItem, Left,  Body, Icon, Button, View, Separator, Thumbnail } from "native-base";
const routes = ["Home", "Chat", "Profile"];
export default class SideBar extends React.Component {

handleClick(){
        Alert.alert("I am clicked");
        // Call method from parent
        //this.props.onPress();
      }

  render() {
    const uri2 = "https://facebook.github.io/react-native/docs/assets/favicon.png";
    return (

        <Content  style={{backgroundColor: '#ffffff'}}>
          <View style={{ flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch', backgroundColor:'blue' }} />
         <List>
         <ListItem  button onPress={this.handleClick} noBorder noIndent icon style={{padding:24, borderBottomWidth: 0}}>
            <Left>
              <Button style={{ backgroundColor: "blue" }}>
                <Icon active name="md-home" />
              </Button>
            </Left>
            <Body>
              <Text>Home Screen</Text>
            </Body>
          </ListItem>

          <ListItem selected noBorder icon>
          <Left>
              <Button style={{ backgroundColor: "black" }}>
                <Icon active name="md-grid" />
              </Button>
            </Left>
            <Body>
              <Text>Projection Report</Text>
            </Body>
          </ListItem>

          <ListItem noBorder icon style={{borderBottomWidth: 0}}>
            <Left>
              <Icon name="delete"/>
            </Left>
            <Body>
              <Text>Summary</Text>
            </Body>
          </ListItem>

          <Separator bordered>

          </Separator>

          <ListItem  noBorder icon style={{borderBottomWidth: 0}}>
            <Left>
              <Button style={{ backgroundColor: "green" }}>
                <Icon active name="logo-usd" />
              </Button>
            </Left>
            <Body>
              <Text>Income Budget</Text>
            </Body>
          </ListItem>

          <ListItem noBorder icon style={{borderBottomWidth: 0}}>
            <Left>
              <Button style={{ backgroundColor: "red" }}>
                <Icon active name="logo-usd" />
              </Button>
            </Left>
            <Body>
              <Text>Expense Budget</Text>
            </Body>
          </ListItem>

          <ListItem noBorder icon style={{borderBottomWidth: 0}}>
            <Left>
              <Button style={{ backgroundColor: "purple" }}>
                <Icon active name="md-calendar" />
              </Button>
            </Left>
            <Body>
              <Text>Event Budget</Text>
            </Body>
          </ListItem>

          <ListItem noBorder icon style={{borderBottomWidth: 0}}>
            <Left>
              <Button style={{ backgroundColor: "cyan" }}>
                <Icon active name="md-card" />
              </Button>
            </Left>
            <Body>
              <Text>Debit Account</Text>
            </Body>
          </ListItem>


          <ListItem noBorder icon style={{borderBottomWidth: 0}}>
            <Left>
              <Button style={{ backgroundColor: "cyan" }}>
                <Icon active name="md-card" />
              </Button>
            </Left>
            <Body>
              <Text>Credit Account</Text>
            </Body>
          </ListItem>
          <Separator bordered>
          </Separator>

          <ListItem noBorder icon style={{borderBottomWidth: 0}}>
            <Left>
              <Button style={{ backgroundColor: "grey" }}>
                <Icon active name="md-settings" />
              </Button>
            </Left>
            <Body>
              <Text>Settings</Text>
            </Body>
          </ListItem>
         </List>
        </Content>

    );
  }
}

运行该应用程序时，我可以打开和关闭导航抽屉。我遇到的问题如下：

-当我单击列表项时，我希望该项目保持突出显示状态。马上您单击第一个列表项，您将看到单击效果，但该项目不会保持突出显示状态。我该怎么办？

-抽屉没有向后箭头或X按钮将其关闭。我需要单击屏幕外或向后滑动。如何添加后退箭头或 X按钮

-出现在抽屉中且带有listitem的列表有点紧靠在一起。我想为列表项添加更多空间。我怎么能够这样吗？

-灰色的两个分隔符太厚。我只想添加一条细线。我该怎么办

我当前的输出（快照）

以下是我想要实现的输出（预期输出），如果您注意到，单击时listitem是高亮显示，listitem之间有更多空间，分隔符只是一条细线。有人可以帮助我更改我的代码以达到预期的结果

本机基本io列表（本机反应）

0 个答案: