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'}}}
/>

Answer 2

您可以在TextInput中添加“主题”属性以设置焦点时标签的颜色

尝试一下

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

如果您不想为每个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>
  );
}

注意：如果要设置完整的应用，则应将应用作为主要的根组件

应用演示

更改标签颜色TextInput在焦点上反应本机纸张

2 个答案: