Add input
This commit is contained in:
parent
5499c1b680
commit
8ebb47f40c
4 changed files with 85 additions and 13 deletions
58
src/components/Input.tsx
Normal file
58
src/components/Input.tsx
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
import React, { Component }from 'react';
|
||||||
|
|
||||||
|
import { TextInput, View, StyleSheet } from 'react-native';
|
||||||
|
import { BRAND_PRIMARY } from '../settings/styles';
|
||||||
|
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
inputBorder: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: BRAND_PRIMARY,
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderRadius: 7,
|
||||||
|
margin: 20
|
||||||
|
} as React.ViewStyle,
|
||||||
|
|
||||||
|
input: {
|
||||||
|
height: 40,
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#000',
|
||||||
|
textAlign: 'center',
|
||||||
|
} as React.TextStyle
|
||||||
|
});
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
value: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Input extends Component<any, State> {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
value: ''
|
||||||
|
};
|
||||||
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange(value : string) {
|
||||||
|
this.setState({ value });
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<View style={styles.inputBorder}>
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
value={this.state.value}
|
||||||
|
onChangeText={this.handleChange}
|
||||||
|
autoCapitalize="none"
|
||||||
|
underlineColorAndroid="transparent"
|
||||||
|
returnKeyType="done"
|
||||||
|
autoCorrect={false}
|
||||||
|
blurOnSubmit
|
||||||
|
enablesReturnKeyAutomatically />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -5,19 +5,24 @@ import {
|
||||||
Navigator,
|
Navigator,
|
||||||
StyleSheet
|
StyleSheet
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
import './types';
|
||||||
|
|
||||||
import Routes from './navigation/Routes';
|
import Routes from './navigation/Routes';
|
||||||
import RouteMapper from './navigation/RouteMapper';
|
import RouteMapper from './navigation/RouteMapper';
|
||||||
import './types';
|
import { NAVBAR_HEIGHT } from './settings/styles';
|
||||||
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
wrapper: {
|
container: {
|
||||||
flex: 1
|
flex: 1,
|
||||||
} as React.ViewStyle,
|
} as React.ViewStyle,
|
||||||
navbar: {
|
navbar: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
backgroundColor: '#888'
|
backgroundColor: '#FFF'
|
||||||
|
} as React.ViewStyle,
|
||||||
|
wrapper: {
|
||||||
|
marginTop: NAVBAR_HEIGHT
|
||||||
} as React.ViewStyle
|
} as React.ViewStyle
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -26,16 +31,18 @@ export default class App extends Component<any, any> {
|
||||||
const Component = route.component;
|
const Component = route.component;
|
||||||
const props = route.props || {};
|
const props = route.props || {};
|
||||||
return (
|
return (
|
||||||
<Component
|
<View style={styles.wrapper}>
|
||||||
nav={nav}
|
<Component
|
||||||
currentRoute={route}
|
nav={nav}
|
||||||
{...props} />
|
currentRoute={route}
|
||||||
|
{...props} />
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.wrapper}>
|
<View style={styles.container}>
|
||||||
<Navigator
|
<Navigator
|
||||||
renderScene={this.renderScene}
|
renderScene={this.renderScene}
|
||||||
initialRoute={Routes.main}
|
initialRoute={Routes.main}
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { Platform } from 'react-native';
|
||||||
|
|
||||||
|
export const NAVBAR_HEIGHT = (Platform.OS === 'ios' ? 64 : 56);
|
||||||
|
export const BRAND_PRIMARY = '#1081DE';
|
||||||
|
export const BRAND_PRIMARY_LIGHT = '#70B1E8';
|
|
@ -4,26 +4,28 @@ import {
|
||||||
Text,
|
Text,
|
||||||
View
|
View
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
|
import Input from '../components/Input';
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: 'center',
|
alignItems: 'stretch',
|
||||||
alignItems: 'center',
|
backgroundColor: '#FFF',
|
||||||
backgroundColor: '#F5FCFF',
|
|
||||||
} as React.ViewStyle,
|
} as React.ViewStyle,
|
||||||
|
|
||||||
text: {
|
text: {
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
margin: 10,
|
margin: 10,
|
||||||
} as React.TextStyle,
|
} as React.TextStyle
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
export default class App extends Component<any, any> {
|
export default class App extends Component<any, any> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
|
<Input />
|
||||||
<Text style={styles.text}>
|
<Text style={styles.text}>
|
||||||
Welcome to React Native!
|
Welcome to React Native!
|
||||||
</Text>
|
</Text>
|
||||||
|
|
Reference in a new issue