import React, { Component } from 'react';
import { Image } from 'react-native';
import { TextInputMask } from 'react-native-masked-text'
import {
Container, Header, Title, Content, Footer,
FooterTab, Button, Left, Right, Body, Icon, Text,
Accordion, Card, CardItem, Thumbnail, ListItem,
CheckBox, DatePicker, DeckSwiper, View, Fab,
Badge, Form, Item, Input, Label
} from 'native-base';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
phone: '',
birthday: new Date(),
showpassword: false,
};
}
render() {
return (
<Container>
<Header>
<Body>
<Title>Form</Title>
</Body>
</Header>
<Content>
<Form>
<Item inlineLabel>
<Label>Username</Label>
<Input />
</Item>
<Item inlineLabel>
<Label>Phone</Label>
<TextInputMask
type={'custom'}
options={{
mask: '(999) 999-9999'
}}
style={{ flex: 1, height: 50 }}
placeholder={'(999) 999-9999'}
value={this.state.phone}
onChangeText={text => {
this.setState({
phone: text
})
}}
/>
</Item>
<Item inlineLabel style={{ height: 50 }}>
<Label>Birthday</Label>
<DatePicker
defaultDate={new Date(2000, 1, 1)}
minimumDate={new Date(1900, 1, 1)}
maximumDate={new Date(2020, 1, 22)}
locale={"en"}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
placeHolderText="Select date"
textStyle={{ color: "green" }}
placeHolderTextStyle={{ color: "#d3d3d3" }}
onDateChange={(e) => this.setState({ birthday: e })}
disabled={false}
/>
</Item>
<Item inlineLabel last>
<Label>Password</Label>
<Input secureTextEntry={!this.state.showpassword} />
<Icon name='eye' onPress={() => this.setState({ showpassword: !this.state.showpassword })} />
</Item>
</Form>
</Content>
<Footer>
<FooterTab>
<Button vertical>
<Text>phone</Text>
<Text>{this.state.phone}</Text>
</Button>
<Button vertical>
<Text>birthday</Text>
<Text>{this.state.birthday.toString().substr(4, 12)}</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
reference:
https://github.com/benhurott/react-native-masked-text
http://chuanshuoge2.blogspot.com/2020/01/nativebase-footertab.html
http://chuanshuoge2.blogspot.com/2020/01/nativebase-datepicker.html
No comments:
Post a Comment