Реагируйте Родной, как изменить BottomborderColor TextInputField при выборе? - PullRequest
Новая
       8

Реагируйте Родной, как изменить BottomborderColor TextInputField при выборе?

0 голосов
/ 04 февраля 2020

Я хочу создать экран входа в систему, где цвет нижнего края из TextInput изменяется, когда пользователь выбирает его и начинает печатать в цвет '# FFCC00'. Может ли кто-нибудь помочь мне с этим вопросом и сказать, что добавить в мой код? Было бы также хорошо, когда кто-то может оставить ссылку, как подключить и настроить полную систему аутентификации. Это было бы очень хорошо, потому что я не нашел ничего, что работает: (

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  TouchableOpacity,
  TextInput,
  selectionColor,
} from 'react-native';

class SignUpScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    return {
      headerStyle: {
        backgroundColor: '#fff',
      },
      headerTintColor: '#2D6097',
      title: 'Sign In',
    };
  };
  render() {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#fff" barStyle="dark-content" />
        <Text style={styles.login}>Regsitrieren</Text>
        <TextInput
          style={styles.input}
          placeholder="E-Mail"
          onChangeText={this.handleEmail}
        />
        <TextInput
          style={styles.input}
          placeholder="Username"
          onChangeText={this.username}
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          secureTextEntry
          onChangeText={this.password}
        />
        <View style={styles.btnContainer}>
          <TouchableOpacity
            style={styles.userBtn}
            onPress={() => this.props.navigation.navigate('SignUp2')}>
            <Text style={styles.btnText}>SignUp</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  header: {
    width: '100%',
    height: 50,
    flex: 1,
    backgroundColor: '#fff',
  },
  login: {
    fontSize: 40,
    marginTop: 30,
    marginBottom: 50,
    color: '#555',
    borderBottomColor: '#2D6097',
    borderBottomWidth: 3,
  },
  input: {
    width: '80%',
    backgroundColor: '#fff',
    padding: 15,
    marginBottom: 50,
    borderBottomColor: '#2D6097',
    borderBottomWidth: 2,
    fontSize: 25,
  },
  btnContainer: {
    justifyContent: 'space-between',
    width: '100%',
    alignItems: 'center',
    marginTop: 30,
  },
  userBtn: {
    backgroundColor: '#2D6097',
    padding: 10,
    margin: 20,
    marginBottom: 50,
    borderRadius: 5,
    width: '80%',
  },
  btnText: {
    fontSize: 30,
    textAlign: 'center',
    color: '#fff',
  },
});

export default SignUpScreen;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1 Ответ

0 голосов
/ 05 февраля 2020

onFocus в TextInput вызывается, когда TextInput сфокусирован и условно отображает ваш стиль в соответствии с этим. Также обязательно измените значение isFocusEmail, когда TextInput не сфокусирован, используя onBlur. 

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";

export default class SignUpScreen extends Component {
  state = {
    isFocusEmail: false
  };

  handleInFocus = () => this.setState({ isFocusEmail: true });

  handleOutFocus = () => this.setState({ isFocusEmail: false });

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.login}>Regsitrieren</Text>
        <TextInput
          onFocus={this.handleInFocus}
          onBlur={this.handleOutFocus}
          style={
            this.state.isFocusEmail
              ? [styles.input, { borderBottomColor: "#FFCC00" }]
              : styles.input
          }
          placeholder="E-Mail"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#fff"
  },
  login: {
    fontSize: 40,
    marginTop: 30,
    marginBottom: 50,
    color: "#555",
    borderBottomColor: "#2D6097",
    borderBottomWidth: 3
  },
  input: {
    width: "80%",
    backgroundColor: "#fff",
    padding: 15,
    marginBottom: 50,
    borderBottomColor: "#2D6097",
    borderBottomWidth: 2,
    fontSize: 25
  }
});

Надеюсь, это вам поможет. Не стесняйтесь сомнений.

...