import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
class Inputs extends Component {
state = {
password: ''
}
handlePassword = (text) => {
this.setState({ password: text })
}
login = ( pass) => {
alert(' password: ' + pass)
}
render() {
return (
<View style = {styles.container}>
<Text style= {{color:'#7a42f4', paddingTop:'38%', textAlign:'center', fontSize:'30', fontWeight: 'bold'} }>Exchange</Text>
<Text style= {{color:'#000', paddingTop:'30%', paddingLeft:'33%', fontSize:'20'} }>Аутентификация</Text>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Токен"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handlePassword}/>
<TouchableOpacity
style = {styles.submitButton}
onPress = {
() => this.login(this.state.password)
}>
<Text style = {styles.submitButtonText}><Text style= {{textAlign:'center'}}>Отправить</Text></Text>
</TouchableOpacity>
</View>
)
}
}
export default Inputs
const styles = StyleSheet.create({
container: {
paddingTop: 23
},
input: {
top: 10,
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1,
textAlign: 'center'
},
submitButton: {
top: 1,
backgroundColor: '#7a42f4',
padding: 10,
margin: 15,
height: 40
},
submitButtonText:{
color: 'white'
}
})
Добавить комментарий
|
1 ответ
Могу посоветовать использовать в целях навигации эту библиотеку https://reactnavigation.org/docs/getting-started/ В документации найдите раздел Stack Navigator. Это именно то, что вам нужно. А так же советую заранее продумать (не в деталях) структуру навигации в приложении, изучить тему Nesting navigators. При должном желании с вопросом организации навигации можно разобраться за пару-тройку часов.