Question

我正在尝试使用React组件中的自定义样式使用Expo构建应用程序，但是由于某些原因，它们不会加载，并且应用程序将使用默认样式加载。

我遵循了许多有关如何执行此操作的文档，因为我认为自己的方法不正确，但没有任何效果。

这是我的代码：

App.js

import React from 'react';
import { View } from 'react-native';
import Signup from './components/signup/Signup'

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Signup />
      </View>
    );
  }
}

Signup.js

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import Svg, { Defs, G, Path, LinearGradient, Stop } from 'react-native-svg';

export default class Signup extends React.Component {
    render() {
        return (
            <View styles={styles.container}>
                <Svg width="60" height="60" viewBox="0 0 60 60">
                    <Defs>
                        <LinearGradient id="a" x1="50%" x2="50%" y1="99.9%" y2="-.1%">
                            <Stop offset="0%" stop-color="#AA8436" />
                            <Stop offset="100%" stop-color="#EFE296" />
                        </LinearGradient>
                    </Defs>
                    <G fill="none" fill-rule="evenodd">
                        <Path fill="#FFF" d="M40.126 2.038C28.607-2.512 15.51.716 7.34 10.118c-8.169 9.403-9.667 22.975-3.75 33.973a9.802 9.802 0 0 0 3.387 3.63c8.982 5.76 20.705 4.44 28.22-3.177a13.29 13.29 0 0 0 3.531-6.505.907.907 0 0 0-.134-.796.882.882 0 0 0-.712-.363.798.798 0 0 0-.647.302 11.758 11.758 0 0 1-16.773 0 18.272 18.272 0 0 1-5.226-12.709 18.484 18.484 0 0 1 5.774-13.312 27.742 27.742 0 0 1 8.461-5.552A26.625 26.625 0 0 1 39.778 3.6h.05a.798.798 0 0 0 .803-.652.807.807 0 0 0-.505-.909z" />
                        <Path fill="url(#a)" d="M55.76 16.014a9.646 9.646 0 0 0-3.322-3.578c-8.817-5.677-20.324-4.376-27.7 3.132a12.88 12.88 0 0 0-3.467 6.461.886.886 0 0 0 .44.956.855.855 0 0 0 1.026-.16c.135-.145.282-.278.44-.398a11.535 11.535 0 0 1 16.072.398c3.307 3.333 5.14 7.889 5.081 12.624-.05 4.949-2.099 9.658-5.668 13.022-4.981 4.775-11.573 7.425-18.418 7.405h-.049a.841.841 0 0 0-.803.699c-.071.397.142.79.51.942C31.22 62 44.085 58.809 52.104 49.529c8.02-9.28 9.482-22.669 3.662-33.514h-.006z" />
                    </G>
                </Svg>

                <Text styles={styles.slogan}>Créer, organiser vos
                formations et évenements.
                </Text>

                <TouchableOpacity styles={styles.button}>
                    <Text styles={styles.buttonText}>S’inscrire</Text>
                </TouchableOpacity>

                <Text styles={styles.loginAskText}>Vous êtes dèjà membre ?</Text>
                <Text styles={styles.loginText}>Se connecter</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00ffff'
    },
    slogan: {
        width: 285,
        height: 64,
        fontFamily: "HelveticaNeue",
        fontSize: 24,
        fontWeight: "normal",
        fontStyle: "normal",
        lineHeight: 32,
        letterSpacing: 0,
        textAlign: "center",
        color: "#ffffff"
    },
    button: {
        width: 294,
        height: 58,
        borderRadius: 4,
        backgroundColor: "#ffffff",
        marginVertical: 10,
        paddingVertical: 12
    },
    buttonText: {
        fontFamily: "HelveticaNeue",
        fontSize: 16,
        fontWeight: "normal",
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "center",
        color: "#22386c"
    },
    loginAskText: {
        width: 360,
        height: 640
    },
    loginText: {
        width: 102,
        height: 19,
        fontFamily: "HelveticaNeue",
        fontSize: 16,
        fontWeight: "bold",
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "center",
        color: "#ffffff"
    }
});

我期望应用自定义样式，但是当我尝试在Web或Android手机上运行该应用程序时，未对默认样式进行任何更改。要应用自定义样式，必须解决什么问题？

Answer 1

您使用的是styles而不是style。

只需更改组件上的道具就可以了。

例如：

<Component style={styles.customStyle}/>

自定义样式不会在Expo上加载

1 个答案: