更改标签颜色 TextInput 反应原生纸 onFocus

Question

如何在聚焦时更改 textInput 的标签颜色。我使用 react-native-paper 默认情况下它是紫罗兰色，是否有任何类似 labelColor 的道具来做同样的事情当单击 textInput 进行编辑时，需要更改 TextInput 的标签颜色。详情请看以下代码

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
   }
})

Answer 1

您可以向 Textinput 添加主题道具，例如：

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