Я установил нативную базу io и использовал ее для разработки активных приложений.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 имеет больше места между ними, разделитель представляет собой только тонкую линию.Может ли кто-нибудь помочь мне внести изменения в мой код для достижения ожидаемого результата
