通过传递ActivityIndi​​cator的大小作为道具时反应本机错误

Question

我正在为我的项目创建一个可重复使用的微调器组件，我已经创建了两个组件：loginform和spinner，当我重新加载应用程序时，我将一个枚举作为道具从loginform传递给了spinner，它在android上崩溃了，但幸运的是它显示了一个错误消息在iOS上显示为“在类型为AndroidProgressBar的阴影节点中更新属性'width'时出错”。

我尝试删除对prop的引用，而是为微调器组件指定枚举值，即“小”或“大”。它起作用了，但是却完全破坏了创建可重用组件的全部目的。

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import firebase from 'firebase';
import { Button, Card, CardSection, Input, Spinner } from './common/';

class LoginForm extends Component {
    state = { email: '', password: '', error: '', loading: false };

    onButtonPress() {
        const { email, password } = this.state;

        this.setState({ error: '', loading: true });

        firebase.auth().signInWithEmailAndPassword(email, password)
        .catch(() => {
            firebase.auth().createUserWithEmailAndPassword(email, password)
            .catch(() => {
                this.setState({ error: 'Authentication Failed!' });
            });
        });
    }

    renderButton() {
        if (this.state.loading) {
            return <Spinner size="small" />;
        } 

        return <Button onPress={this.onButtonPress.bind(this)}>Log In</Button>;
    }

    render() {
        return (
            <View style={{ marginTop: 50 }}>
                <Card>
                    <CardSection>
                        <Input 
                            autoCorrect={false}
                            label='Email :'
                            placeholder='user@example.com'
                            value={this.state.email}
                            onChangeText={email => this.setState({ email })}
                        />
                    </CardSection>

                    <CardSection>
                        <Input 
                            secureTextEntry
                            placeholder='password'
                            label='Password :'
                            value={this.state.password}
                            onChangeText={password => this.setState({ password })}
                        />
                    </CardSection>

                    <Text style={styles.errorTextStyle}>{this.state.error}</Text>

                    <CardSection style={{ flexDirection: 'column' }}>
                        {this.renderButton()}
                    </CardSection>
                </Card>
            </View>
        );
    }
}

const styles = {
    errorTextStyle: {
        fontSize: 20,
        color: 'red',
        alignSelf: 'center',
        borderColor: 'white',
    }
};

export default LoginForm;

其他组件的代码：

import React from 'react';
import { ActivityIndicator, View } from 'react-native';

// eslint-disable-next-line arrow-body-style
const Spinner = (size) => {
    return (
        <View style={styles.spinnerStyle}>
            <ActivityIndicator size={size || 'large'} />
        </View>
    );
};

const styles = {
    spinnerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
};

export { Spinner };

我运行了上面的代码，并在android上的expo应用程序上运行了，它崩溃了，在ios上没有崩溃，但是在红色屏幕上显示了上述错误。

Answer 1

您是否使用过“ this.props.prop”来访问道具，如果是这样，则无状态组件不具有“ this.props”属性，而是应该像这样传递道具

在登录屏幕上正常使用此

if (this.state.loading) {
            return <Spinner prop="small" />;
        } 

在您的组件中使用此

const Spinner = (prop) => {
    return (
        <View style={styles.spinnerStyle}>
            <ActivityIndicator size=prop />
        </View>
    );
};