yarn进行了本机项目。使用以下命令添加了Textinputlayout：yarn add rn-textinputlayout 。 TextInputLayout时，它都可以正常工作！遇到错误：
Invariant Violation: [5,"RCTText",301,{"fontSize":"<<NaN>>","height":"<<NaN>>","backgroundColor":0,"transform":[{"translateY":"<<NaN>>"}],"color":-3684403,"accessible":true,"allowFontScaling":true,"ellipsizeMode":"tail"}] is not usable as a native method argument
This error is located at:
in RCTText (at Text.js:159)
in TouchableText (at Text.js:283)
in Text (at createAnimatedComponent.js:151)
in AnimatedComponent (at TextInputLayout.js:152)
in RCTView (at View.js:35)
in View (at TextInputLayout.js:147)
in TextInputLayout (at Login.js:38)
in RCTView (at View.js:35)
in View (at Login.js:16)
in LoginScreen (at SceneView.js:9)
in SceneView (at StackViewLayout.tsx:898)
in RCTView (at View.js:35)
in View (at StackViewLayout.tsx:897)
in RCTView (at View.js:35)
in View (at StackViewLayout.tsx:896)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at StackViewCard.tsx:106)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at screens.native.js:71)
in Screen (at StackViewCard.tsx:93)
in Card (at createPointerEventsContainer.tsx:95)
in Container (at StackViewLayout.tsx:984)
in RCTView (at View.js:35)
in View (at screens.native.js:101)
in ScreenContainer (at StackViewLayout.tsx:393)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at StackViewLayout.tsx:383)
in PanGestureHandler (at StackViewLayout.tsx:376)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.tsx:104)
in RCTView (at View.js:35)
in View (at Transitioner.tsx:267)
in Transitioner (at StackView.tsx:41)
in StackView (at createNavigator.js:80)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at createAppContainer.js:430)
in NavigationContainer (at App.js:38)
in AppProvider (at App.js:37)
in _default (at renderApplication.js:40)
in RCTView (at View.js:35)
in View (at AppContainer.js:98)
in RCTView (at View.js:35)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:39)
我的 Login.js ：
import React from 'react';
import {View,TextInput} from 'react-native';
import { TextInputLayout } from 'rn-textinputlayout';
const LoginScreen = () => {
return (
<View>
<TextInputLayout >
<TextInput
placeholder={"Enter email"}
/>
</TextInputLayout>
</View>
);
}
export default LoginScreen;
我的 TextInputLayout.js ：
'use strict';
import React, { Component } from 'react';
import { StyleSheet, View, Animated, Platform } from 'react-native';
import PropTypes from 'prop-types';
const DEFAULT_PLACEHOLDER_COLOR = '#C7C7CD';
const DEFAULT_LABEL_COLOR = '#414Db1';
const DEFAULT_LABEL_ERROR_COLOR = '#C5270E';
export default class TextInputLayout extends Component {
static propTypes = {
...View.propTypes,
hintColor: PropTypes.string,
errorColor: PropTypes.string,
focusColor: PropTypes.string,
labelFontSize: PropTypes.number,
labelText: PropTypes.string,
checkValid: PropTypes.func
};
static defaultProps = {
hintColor: DEFAULT_PLACEHOLDER_COLOR,
errorColor: DEFAULT_LABEL_ERROR_COLOR,
focusColor: DEFAULT_LABEL_COLOR,
labelFontSize: 12,
labelText: undefined,
checkValid: undefined
};
state = {
showLabel: false,
labelAnimationValue: new Animated.Value(0),
isFocused: false,
isError: false
};
constructor (props) {
super(props);
this._onBlur = this._onBlur.bind(this);
this._onFocus = this._onFocus.bind(this);
this._onChangeText = this._onChangeText.bind(this);
this._handleChildren(props);
}
componentWillReceiveProps (nextProps) {
this._handleChildren(nextProps);
}
componentWillUpdate (nextProps, nextState) {
if (nextState.showLabel !== this.state.showLabel) {
this._springValue(this.state.labelAnimationValue, nextState.showLabel ? 1 : 0)
}
}
_springValue (animatedValue, toValue) {
Animated.spring(animatedValue, {
toValue: toValue,
friction: 10
}).start();
}
_handleChildren (props) {
let edtChild = React.Children.only(props.children);
this._oriEdtChild = edtChild;
this._oriEdtStyle = StyleSheet.flatten([edtChild.props.style])
this._oriOnFocus = edtChild.props.onFocus;
this._oriOnBlur = edtChild.props.onBlur;
this._oriOnChangeText = edtChild.props.onChangeText;
const textValue = edtChild.props.value || edtChild.props.defaultValue;
if (textValue) {
this._edtText = textValue;
this.state.showLabel = true;
this.state.labelAnimationValue = new Animated.Value(1);
}
this._edtChild = React.cloneElement(edtChild, {
onFocus: this._onFocus,
onBlur: this._onBlur,
onChangeText: this._onChangeText,
style: [edtChild.props.style, {
backgroundColor: 'transparent',
textAlignVertical: 'center',
textAlign: 'left',
padding: 0
}],
placeholder: null,
underlineColorAndroid: 'transparent'
});
let {height, fontSize}= this._oriEdtStyle;
let labelHeight = fontSize + 3;
let labelTransY = this.state.labelAnimationValue.interpolate({
inputRange: [0, 1],
outputRange: [height + labelHeight >> 1, labelHeight - this.props.labelFontSize]
});
let labelFontSize = this.state.labelAnimationValue.interpolate({
inputRange: [0, 1],
outputRange: [fontSize, this.props.labelFontSize]
});
this._labelStyle = {
fontSize: labelFontSize,
height: labelHeight,
backgroundColor: 'transparent',
transform: [{translateY: labelTransY}]
};
}
_onFocus () {
if (!this._edtText) this.setState({showLabel: true, isFocused: true});
else this.setState({isFocused: true});
this._oriOnFocus && this._oriOnFocus();
}
_onBlur () {
let isError = false;
if (this.props.checkValid) isError = !this.props.checkValid(this._edtText);
if (!this._edtText) this.setState({showLabel: false, isFocused: false, isError});
else this.setState({isFocused: false, isError});
this._oriOnBlur && this._oriOnBlur();
}
_onChangeText (text) {
this._edtText = text;
if (this.props.checkValid) {
let isError = !this.props.checkValid(this._edtText);
if (this.state.isError !== isError) this.setState({isError});
}
this._oriOnChangeText && this._oriOnChangeText(text);
}
render () {
let {isFocused, isError}=this.state;
let {errorColor, hintColor, focusColor}=this.props;
let color = isError ? errorColor : (isFocused ? focusColor : hintColor);
return (
<View style={[{
borderBottomWidth: isFocused ? 2 : 1,
borderBottomColor: color
}, this.props.style]}
>
<Animated.Text
style={[this._labelStyle, {color: color}]} >
{this.props.labelText || this._oriEdtChild.props.placeholder }
</Animated.Text>
{this._edtChild}
</View>
);
}
}
答案 0 :(得分：0)
所以我自己找到了解决方案！
错误说： Invalid violation: “ fontSize”：“ << \ NaN >>”，“ height”：“ << \ NaN >>” 这意味着我必须在component中使用这些参数！因此，我将TextInput修改如下：
<TextInput
placeholder={'Hello'}
style={{
fontSize: 16,
height: 40,
}}
错误已解决！