更改标签颜色TextInput在焦点上反应本机纸张 [英] Change label Color TextInput react native paper onFocus

问题描述

如何在焦点对准textInput时更改其标签颜色.我默认使用react-native-paper，它是紫罗兰色的，有没有像labelColor这样的道具可以做同样的事情 单击textInput进行编辑时，需要更改TextInput的标签颜色.请查看以下代码以获取详细信息

how to change the label color for textInput when it is focused. I am using react-native-paper by default it is violet in color is there any prop like labelColor to do the same The label color of TextInput needs to be changed when the textInput is clicked to edit. PLease see the following code for details

import React, {Component} from 'react'
import { View, StyleSheet } from 'react-native'
import { Text, TextInput, Card, Button } from 'react-native-paper'

class login extends Component {
    state = {
        email: '',
        password: ''
    }
    handleEmail = (text) => {
        this.setState({email: text})
    }
    handlePassword = (text) => {
        this.setState({password: text})
    }
    render(){
        return (
            <View style = {styles.container}>
            <View style = {styles.part1}/>
            <View style = {styles.part2}/>
            <View style = {styles.CardContainer}>
            <Card style = {styles.card1}>
                <Card.Title title = "LOGIN" titleStyle = {{alignSelf: 'center',color: '#0080ff'}}/>
                <Card.Content> 
                <TextInput style = {styles.input}
                    underlineColorAndroid = "transparent"
                    label = "Email"
                    autoCapitalize = "none"
                    onChangeText = {this.handleEmail}/>

                <TextInput style = {styles.input}
                    underlineColorAndroid = "transparent"
                    label = "Password"
                    autoCapitalize = "none"
                    onChangeText = {this.handlePassword}/>
                </Card.Content>
                <Card.Actions>
                  <View  style = {styles.container2}>
                <Button mode = "contained" onPress={() => this.props.navigation.navigate('Main')} style = {styles.btn}>
                    LOG IN
                </Button>
                  <Button mode = "text" onPress={() => this.props.navigation.navigate('SignUp')} style = {styles.btn1}>
                  <Text style = {{color: "#0080ff"}}>New User? Register</Text>
               </Button>
               </View>
                </Card.Actions>
            </Card>
            </View>
         </View>
        );      
    }
}

export default login

const styles = StyleSheet.create({
   container: {
      flex: 1,
      flexDirection: 'column',
   },
   CardContainer: {
      overflow: 'hidden',
      position: 'absolute',
         width: '100%',
         height: '100%',
         justifyContent: 'center',
         paddingHorizontal: 20
   },
   card1: {
      width: '100%',
        borderRadius: 8
   },
   part1: {
      flex: 1.2,
      backgroundColor: '#0080ff',
   },
   part2: {
      flex: 2,
      backgroundColor: '#d3d3d3',
   },
   input: {
      fontSize: 20,
      paddingVertical: 0,
      paddingHorizontal: 0,
        margin: 15,
        backgroundColor: "#ffffff"
   },
   btn: {
      width: '75%',
      color: '#0080ff',
      borderRadius: 25,
      backgroundColor: "#0080ff",
      marginTop: 20,
        marginLeft: '12.5%'
   },
   container2: {
         flex: 1,
         flexDirection: 'column',
         justifyContent: 'space-between'
   },
   btn1: {
         color: '#0080ff',
         marginTop: 20
   }
})

推荐答案

您可以将主题道具添加到Textinput 例如:

You can add theme prop to Textinput eg:

<TextInput
  label="Phone number"
  theme={{colors: {primary: 'red'}}}
/>

这篇关于更改标签颜色TextInput在焦点上反应本机纸张的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！