为什么Expo的样式在Web上有效，但在移动设备上不起作用

Question

我正在使用Expo制作移动应用程序，当我进入用于编码时要测试的应用程序的Web界面时，它的工作效果很好，但是当我在手机上尝试该应用程序时，样式就一团糟上。

例如，这是“注册”页面，该页面也不起作用：

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

export default class Signup extends React.Component {
    render() {
        return (
            <ImageBackground style={styles.container} source={require('../../assets/background_image.jpg')}>
                <Svg style={styles.logo} 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 style={styles.slogan}>Créer, organiser vos
                formations et évenements.
                </Text>

                <TouchableOpacity style={styles.button} onPress={() => {this.props.navigation.navigate('Proceed')}}>
                    <Text style={styles.buttonText}>S’inscrire</Text>
                </TouchableOpacity>

                <Text style={styles.loginAskText}>Vous êtes dèjà membre ?</Text>
                <TouchableOpacity onPress={() => {this.props.navigation.navigate('Login')}}>
                    <Text style={styles.loginText}>Se connecter</Text>
                </TouchableOpacity>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        alignSelf: 'stretch'
    },
    logo: {
        width: 60,
        height: 60,
        marginTop: '10%'
    },
    slogan: {
        width: 285,
        height: 64,
        fontFamily: "HelveticaNeue",
        fontSize: 24,
        fontWeight: "normal",
        fontStyle: "normal",
        lineHeight: 32,
        letterSpacing: 0,
        textAlign: "center",
        color: "#ffffff",
        marginTop: '3%',
    },
    button: {
        width: 294,
        height: 58,
        borderRadius: 4,
        backgroundColor: "#ffffff",
        marginTop: '20.6%',
        paddingTop: '1.5%'
    },
    buttonText: {
        fontFamily: "HelveticaNeue",
        fontSize: 16,
        fontWeight: "normal",
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "center",
        color: "#22386c"
    },
    loginAskText: {
        marginTop: `2%`,
        width: 159,
        height: 16,
        fontFamily: "HelveticaNeue",
        fontSize: 14,
        fontWeight: "normal",
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "center",
        color: "#ffffff"
    },
    loginText: {
        width: 102,
        height: 19,
        fontFamily: "HelveticaNeue",
        fontSize: 16,
        fontWeight: "bold",
        fontStyle: "normal",
        letterSpacing: 0,
        textAlign: "center",
        color: "#ffffff",
        margin: '10%'
    }
});

例如，当我刚尝试在手机上运行该应用程序时，设计居中但没有背景图像，所有元素仅显示一半，而另一半则隐藏在顶部。