Question

因此，我是新来的本地人，我得到了';'期望此功能，我不知道为什么

    getInitialState(){
    return { style: styles.textinput_unfocused }
    }

当输入从灰色聚焦到绿色时，我想更改底部边框的颜色

   <View style={styles.inputStyle}>
     <TextInput style={styles.inputType}
        placeholder='Email'
          onBlur={ () => this.onBlur() }
          onFocus={ () => this.onFocus() }
    style={ [styles.textinput, this.state.style] }

    />
    <TextInput style={styles.inputType}
    placeholder='Password'/>

  </View>

以及稍后在代码中即时定义这些功能时

      getInitialState(){
          return { style: styles.textinput_unfocused }
          }
      onFocus(){
        this.setState({ style: styles.textinput_focused })
          }

即时消息出错，告诉我我错过了;标记有谁知道为什么或有更好的主意来更改这些输入中的颜色？

Answer 1

使用此带有钩子的本机HOC进行onFocus边框颜色更改

import React, { useState } from 'react';
import { TextInput } from 'react-native';

function TextInputWidget(props) {
  const {
    style,
    onFocus,
    onBlur,
    ...restProps
  } = props;
  const [changeBottomColor, handleBottomColor] = useState(false);
  const onFocusHandler = () => {
    handleBottomColor(true);
    if (onFocus) {
      onFocus();
    }
  };
  const onBlurHandler = () => {
    handleBottomColor(false);
    if (onBlur) {
      onBlur();
    }
  };


  return (
    <TextInput
      style={Object.assign({}, style, { borderColor: changeBottomColor ? '#000': '#fff' , borderWidth: 1 })}
      onFocus={onFocusHandler}
      onBlur={onBlurHandler}
      {...restProps}
    />
  );
}

export default TextInputWidget;

Answer 2

您可以使用我的TextInput组件，希望您将从我的组件中获得很多信息。

// @flow

import * as React from 'react';
import { View, Text, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

/* FLow Types
============================================================================= */
type State = {
  active: boolean,
};

type KeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad';
type KeyboardTypeIOS =
  | 'ascii-capable'
  | 'numbers-and-punctuation'
  | 'url'
  | 'number-pad'
  | 'name-phone-pad'
  | 'decimal-pad'
  | 'twitter'
  | 'web-search';
type KeyboardTypeAndroid = 'visible-password';
type KeyboardTypeOptions = KeyboardType | KeyboardTypeAndroid | KeyboardTypeIOS;

type ReturnKeyType =
  // Cross Platform
  | 'done'
  | 'go'
  | 'next'
  | 'search'
  | 'send'
  // Android-only
  | 'none'
  | 'previous'
  // iOS-only
  | 'default'
  | 'emergency-call'
  | 'google'
  | 'join'
  | 'route'
  | 'yahoo';

type Props = {
  marginVertical?: number,
  labelSize: number,
  labelColor?: string,
  label?: ?string,
  backgroundColor?: string,
  iconName?: ?string,
  reference?: ?Function,
  placeholder?: string,
  placeholderTextColor: string,
  value?: ?string,
  onChange: Function,
  onChangeText: Function,
  onSubmitEditing?: Function,
  secureTextEntry?: boolean,
  multiline?: boolean,
  editable?: boolean,
  returnKeyType?: ReturnKeyType,
  keyboardType?: KeyboardTypeOptions,
  color: string,
};

/* =============================================================================
<InputText />
============================================================================= */
class InputText extends React.PureComponent<Props, State> {
  /**
   * Default Props
   */
  static defaultProps = {
    marginVertical: 5,
    labelColor: '#696969',
    backgroundColor: 'transparent',
    label: null,
    iconName: null,
    reference: null,
    placeholder: '',
    value: '',
    onSubmitEditing: () => {},
    secureTextEntry: false,
    multiline: false,
    editable: true,
    returnKeyType: 'default',
    keyboardType: 'default',
  };

  /**
   * State Here
   */
  state = { active: false };

  /**
   * Start render method
   */
  render() {
    const { active } = this.state;
    const {
      marginVertical,
      labelSize,
      labelColor,
      label,
      backgroundColor,
      iconName,
      reference,
      placeholder,
      placeholderTextColor,
      value,
      onChange,
      onChangeText,
      onSubmitEditing,
      secureTextEntry,
      multiline,
      editable,
      returnKeyType,
      keyboardType,
      color,
    } = this.props;
    return (
      <View style={{ marginVertical }}>
        {label ? (
          <Text style={{ fontSize: labelSize, color: labelColor }}>
            {label}
          </Text>
        ) : null}
        <View
          style={{
            backgroundColor: editable ? backgroundColor : '#DEDEDE',
            borderWidth: 1,
            borderColor: active ? '#3DBA81' : '#CECECE',
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          {iconName ? (
            <View
              style={{
                padding: 8,
              }}
            >
              <Icon name={iconName} style={{ fontSize: 20 }} />
            </View>
          ) : null}
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              paddingHorizontal: 5,
            }}
          >
            <TextInput
              ref={reference}
              placeholder={placeholder}
              placeholderTextColor={editable ? placeholderTextColor : '#575757'}
              value={value}
              onChange={onChange}
              onChangeText={onChangeText}
              onSubmitEditing={onSubmitEditing}
              onFocus={() => this.setState({ active: true })}
              onBlur={() => this.setState({ active: false })}
              autoCorrect={false}
              secureTextEntry={secureTextEntry}
              underlineColorAndroid="transparent"
              multiline={multiline}
              editable={editable}
              returnKeyType={returnKeyType}
              keyboardType={keyboardType}
              style={{ fontSize: 17, color, paddingVertical: 8 }}
            />
          </View>
        </View>
      </View>
    );
  }
}

/* Exports
============================================================================= */
export default InputText;

注意：您可以根据需要更改设计。

输入聚焦时更改边框颜色错误

2 个答案: