运行react本机应用程序时出错 我正在使用react native，但出现以下错误 我使用纱线制作了react native项目文本输入布局是使用命令添加的： 纱线添加rn文本输入布局 我在Android设备API级别28上遇到这个错误。每当我评论TextInputLayout时，它都可以正常工作
获取以下错误：运行react本机应用程序时出错 我正在使用react native，但出现以下错误 我使用纱线制作了react native项目文本输入布局是使用命令添加的： 纱线添加rn文本输入布局 我在Android设备API级别28上遇到这个错误。每当我评论TextInputLayout时，它都可以正常工作,android,react-native,react-native-android,yarnpkg,Android,React Native,React Native Android,Yarnpkg,获取以下错误： Invariant Violation: [5,"RCTText",301,{"fontSize":"<<NaN>>","height":"<<NaN>>","backgroundColor":0,"transform":[{"translateY":"<<NaN>>"}],"color":-3684403,"accessible":true,"allowFontScaling":true,"ellipsiz
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)
不变冲突：[5，“RCTText”，301，{“fontSize”：“height”：“backgroundColor”：0，“transform”：[{“translateY”：“}]，“color”：-3684403，“accessible”：true，“allowFontScaling”：true，“ellipsizeMode”：“tail”}]不能用作本机方法参数
此错误位于：
在RCTText中（位于Text.js:159）
在TouchableText中（位于Text.js:283）
文本格式（位于createAnimatedComponent.js:151）
在AnimatedComponent中（位于TextInputLayout.js:152）
在RCTView中（在View.js:35）
在视图中（位于TextInputLayout.js:147）
在TextInputLayout中（在Login.js:38处）
在RCTView中（在View.js:35）
在视图中（登录到Login.js:16）
在LoginScreen中（位于SceneView.js:9）
在SceneView中（位于StackViewLayout.tsx:898）
在RCTView中（在View.js:35）
视图中（位于StackViewLayout.tsx:897）
在RCTView中（在View.js:35）
视图中（位于StackViewLayout.tsx:896）
在RCTView中（在View.js:35）
在视图中（位于createAnimatedComponent.js:151）
在动画组件中（位于StackViewCard.tsx:106）
在RCTView中（在View.js:35）
在视图中（位于createAnimatedComponent.js:151）
在AnimatedComponent中（在screens.native.js:71处）
屏幕内（在StackViewCard.tsx:93处）
卡片中（在CreatePointerEventContainer.tsx:95处）
容器内（位于StackViewLayout.tsx:984处）
在RCTView中（在View.js:35）
在视图中（位于screens.native.js:101）
屏幕容器中（位于StackViewLayout.tsx:393）
在RCTView中（在View.js:35）
在视图中（位于createAnimatedComponent.js:151）
在动画组件中（位于StackViewLayout.tsx:383）
在PanGestureHandler中（位于StackViewLayout.tsx:376）
在StackViewLayout中（在withOrientation.js:30处）
在withOrientation中（在StackView.tsx:104处）
在RCTView中（在View.js:35）
在视图中（位于Transitioner.tsx:267）
在Transitioner中（位于StackView.tsx:41）
在StackView中（位于createNavigator.js:80）
在Navigator中（位于createKeyboardAwareNavigator.js:12）
在KeyboardAwareNavigator中（位于createAppContainer.js:430）
在NavigationContainer中（位于App.js:38）
在AppProvider中（位于App.js:37）
默认情况下（在renderApplication.js:40处）
在RCTView中（在View.js:35）
在视图中（位于AppContainer.js:98）
在RCTView中（在View.js:35）
在视图中（位于AppContainer.js:115）
在AppContainer中（位于renderApplication.js:39）
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;
'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>
);
}
}
从“React”导入React；
从“react native”导入{View，TextInput}；
从“rn TextInputLayout”导入{TextInputLayout}；
常量登录屏幕=（）=>{
返回(
);
}
导出默认登录屏幕；
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;
'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>
);
}
}
“严格使用”；
从“React”导入React，{Component}；
从“react native”导入{样式表、视图、动画、平台}；
从“道具类型”导入道具类型；
常量默认占位符颜色='#C7C7CD'；
常量默认值_标签_颜色='#414Db1'；
常量默认值_标签_错误_颜色='#C5270E'；
导出默认类TextInputLayout扩展组件{
静态类型={
…视图.propTypes，
hintColor:PropTypes.string，
errorColor:PropTypes.string，
focusColor:PropTypes.string，
labelFontSize:PropTypes.number，
labelText:PropTypes.string，
checkValid:PropTypes.func
};
静态defaultProps={
hintColor:默认的\u占位符\u颜色，
errorColor:默认的\u标签\u错误\u颜色，
焦点颜色：默认的标签颜色，
labelFontSize:12，
labelText:未定义，
checkValid:未定义
};
状态={
showLabel:false，
labelAnimationValue:新的动画.Value（0），
isFocused:错，
伊瑟罗：错
};
建造师（道具）{
超级（道具）；
this.\u onBlur=this.\u onBlur.bind（this）；
this.\u onFocus=this.\u onFocus.bind（this）；
this.\u onChangeText=this.\u onChangeText.bind（this）；
这个.(道具),；
}
组件将接收道具（下一步）{
这是小手童（下一步）；
}
组件将更新（下一步，下一步状态）{
if（nextState.showLabel！==this.state.showLabel）{
this.\u springValue（this.state.labelAnimationValue，nextState.showLabel？1:0）
}
}
_springValue（动画值、toValue）{
Animated.spring（animatedValue{
toValue:toValue，
摩擦力：10
}).start（）；
}
_手扶儿童（道具）{
let edtChild=React.Children.only（props.Children）；
这个。_orientChild=edtChild；
此.\u oridedtstyle=StyleSheet.flatte（[edtChild.props.style]）
这。_oriOnFocus=edtChild.props.onFocus；
这个。_oriOnBlur=edtChild.props.onBlur；
此.\u oriOnChangeText=edtChild.props.onChangeText；
const textValue=edtChild.props.value | | edtChild.props.defaultValue；
如果（文本值）{
这是._edtText=textValue；
this.state.showLabel=true；
this.state.labelAnimationValue=新的动画.Value（1）；
}
this.\u edtChild=React.cloneElement（edtChild{
聚焦：这个，
这个，
onChangeText:this.\u onChangeText，
style:[edtChild.props.style{
背景色：“透明”，
textAlignVertical:'中心'，
textAlign:'左'，
填充：0
}],
占位符：空，
变色龙：“透明”
});
设{height，fontSize}=this.\u定向样式；
让labelHeight=fontSize