Change label Color TextInput react native paper onFocus

问题

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

回答1:

You can add theme prop to Textinput eg:

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

回答2:

You can add "theme" prop to TextInput to set color of Label when focus

Try this

<TextInput
          style={styles.input}
          underlineColorAndroid="transparent"
          label="Email"
          autoCapitalize="none"
          onChangeText={this.handleEmail}
          theme={{colors: {primary: 'red'}}}
        />

if you do not want to add theme prop for each textinput component you can set the default theme

Try this

import React from 'react';
import {View} from 'react-native';
import {
  TextInput,
  DefaultTheme,
  Provider as PaperProvider,
} from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'red',
  },
};

class App extends React.Component {
  state = {
    text: '',
    name: '',
  };

  render() {
    return (
      <View style={{flex: 1, marginTop: 60}}>
        <TextInput
          label="Email"
          value={this.state.text}
          onChangeText={text => this.setState({text})}
        />
        <TextInput
          label="Name"
          value={this.state.text}
          onChangeText={text => this.setState({text})}
        />
      </View>
    );
  }
}

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

Note : App should be your main root component if you want to set for complete app

App Demo

来源：https://stackoverflow.com/questions/58786281/change-label-color-textinput-react-native-paper-onfocus