Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import {
- StyleSheet,
- Text,
- View,
- StatusBar,
- TouchableOpacity,
- Keyboard,
- TouchableWithoutFeedback,
- } from 'react-native';
- import {MultiSliderProps} from 'react-native-multi-slider'
- import Slider from 'react-native-slider';
- import { Header, Icon, Button, Avatar, Input } from 'react-native-elements';
- const DismissKeyboard = ({ children }) => (
- <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
- {children}
- </TouchableWithoutFeedback>
- );
- export default class App extends React.Component {
- state = {
- value1: 500,
- value2: 1000,
- };
- render() {
- return (
- <DismissKeyboard>
- <View style={styles.container}>
- <Header />
- <View
- style={{
- backgroundColor: '#FFF',
- marginHorizontal: 10,
- borderRadius: 8,
- flex: 0.23,
- flexDirection: 'column',
- alignItems: 'stretch',
- justifyContent: 'flex-start',
- }}>
- <Text style = {{
- color: '#E41D32',
- fontfamily: 'Roboto',
- fontstyle: 'normal',
- fontweight: '',
- lineheight: 16,
- marginTop: 20,
- marginLeft: 15,
- }}>Цена</Text>
- <Slider
- style={{ marginHorizontal: 10 }}
- value={this.state.value1}
- maximumValue={3024}
- step={1}
- thumbTintColor = '#E41D32'
- maximumTrackTintColor = '#E41D32'
- minimumTrackTintColor = '#AEAFB2'
- trackStyle = {{height: 2}}
- thumbStyle = {{}}
- onValueChange={value1 => this.setState({ value1 })}
- />
- <Slider
- thumbTintColor = '#E41D32'
- maximumTrackTintColor = '#AEAFB2'
- minimumTrackTintColor = '#E41D32'
- style={{ marginTop: -10, marginHorizontal: 10 }}
- value={this.state.value2}
- trackStyle = {{height: 2}}
- maximumValue={3024}
- step={1}
- onValueChange={value2 => this.setState({ value2 })}
- />
- <View
- style={{
- flexDirection: 'row',
- alignItems: 'flex-end',
- justifyContent: 'center',
- flex: 0.1,
- marginTop:10,
- }}>
- <Text>{this.state.value1} руб</Text>
- <Text> - </Text>
- <Text>{this.state.value2} руб</Text>
- </View>
- </View>
- </View>
- </DismissKeyboard>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#E5E5E5',
- alignItems: 'stretch',
- flexDirection: 'column',
- justifyContent: 'flex-start',
- },
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement