我想在React天真中使用浮动标签创建带有动画的自定义文本输入并使用此代码,但是当我单击文本输入时,此错误出现在android设备上。即时通讯使用反应本机0.57进行开发。
export default class FloatingLabelInput extends Component {
state = {
isFocused: false,
};
componentWillMount() {
this._animatedIsFocused = new Animated.Value(this.props.value === '' ? 0 : 1);
}
handleFocus = () => this.setState({ isFocused: true });
handleBlur = () => this.setState({ isFocused: false });
componentDidUpdate() {
Animated.timing(this._animatedIsFocused, {
toValue: (this.state.isFocused || this.props.value !== '') ? 1 : 0,
duration: 200,
}).start();
}
render() {
const {style, label, ...props} = this.props;
const { isFocused } = this.state;
const labelStyle = {
position: 'absolute',
right: 0,
top: this._animatedIsFocused.interpolate({
inputRange: [0, 1],
outputRange: [16, 0],
}),
fontSize: this._animatedIsFocused.interpolate({
inputRange: [0, 1],
outputRange: [16, 14],
}),
color: this._animatedIsFocused.interpolate({
inputRange: [0, 1],
outputRange: ['#aaa', '#000'],
}),
};
return (
<View style={{ height:60 }}>
<Text style={labelStyle}>
{label}
</Text>
<TextInput
{...props}
style={style}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
blurOnSubmit
/>
</View>
);
}
}
const styles = StyleSheet.create({
inputText:{
textAlign:'right',
height: 26,
fontSize: 16,
color: '#000',
flex:1,
}