Изменить метку Цвет TextInput реагировать на родную бумагу на Focus

Question

как изменить цвет метки для textInput, когда он сфокусирован. Я использую реагирующую нативную бумагу по умолчанию, она фиолетового цвета, есть ли какая-либо подпорка, как 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

Вы можете добавить пропозицию "theme" в TextInput, чтобы установить цвет метки, когда фокус

Попробуйте это

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

, если вы не хотите добавлять темуprop для каждого компонента textinput вы можете установить тему по умолчанию

Попробуйте это

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

Примечание: приложение должно быть вашим основным корневым компонентом, если вы хотитенабор для полного приложения

Демонстрация приложения