将活动指示器的大小作为道具传递时出现本机错误

Question

我正在为我的项目创建一个可重用的微调器组件，我创建了 2 个组件：loginform 和微调器，当我重新加载应用程序时，我将枚举作为道具从 loginform 传递到微调器，它在 android 上崩溃了，但幸运的是它在 iOS 上显示一条错误消息，说"在类型的影子节点中更新属性'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='[e-mail]'
                            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 上的博览会应用程序上，它崩溃了，在 ios 上它没有崩溃，但在红屏上显示上述错误。

Answer 1

您是否使用"this.props.props"来访问props，如果是这样，则无状态组件没有"this.props"属性，而是应该像这样传递props

在您的登录屏幕中正常使用它

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

在您的组件中使用此

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