运行react-native应用程序时出现错误

问题描述 投票:0回答:2
  • 我在本机中使用TextInputLayout,但低于错误。
  • 我使用yarn制作了本机项目。使用以下命令添加Textinputlayoutyarn add rn-textinputlayout
  • 我在Android设备API级别28上遇到此错误。只要我评论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>
        );
    }
}
android react-native react-native-android yarn
2个回答
0
投票

您是否已安装依赖项“ prop-type”,她在您的库中使用过

尝试在您的终端机中运行以下一项:

yarn add prop-types --save

npm install --save道具类型

并尝试重建,

希望对您有帮助


0
投票

所以我自己找到了解决方案!

错误说:Invalid violation: “ fontSize”:“ << \ NaN >>”,“ height”:“ << \ NaN >>”这意味着我必须在以下位置使用这些参数一个component!所以我修改了TextInput如下:

<TextInput
      placeholder={'Hello'}
      style={{
        fontSize: 16,
        height: 40,
      }}

错误已解决!

© www.soinside.com 2019 - 2024. All rights reserved.