所以我刚开始反应原生，我得到了';' 预期此功能，我不知道为什么
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 })
}
我收到错误，告诉我我错过了；标记任何人都知道为什么或有更好的主意来改变这些输入中的颜色？
您可以使用我的 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;
注意：您可以随心所欲地更改设计。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句