Expo-Android模拟器中的图标位置不正确

编程问答 2022-11-01

问题描述

希望您在这个大流行期间保持健康。 我的博览会应用程序中有一个问题。 请检查所附图片

iOS status

以下是来自Android

Android status

如您所见，密码字段的图标位置在Android上不正确。 代码如下所示。

    <View style={styles.footer}>
        <View style={styles.inputContainer}>
            <Icon name="email-outline" size={wp('6%')} color="#00438b" style={styles.inputIcon} />
            <TextInput
                label="Email"
                style={styles.input}
            />
        </View>
        <View style={styles.inputContainer}>
            <Icon name="shield-key-outline" size={wp('6%')} color="#00438b" style={styles.inputIcon} />
            <TextInput
                label="Password"
                style={styles.input}
            />
        </View>
    </View>

样式也是：

    footer: {
        flex: 3,backgroundColor: '#fff',borderTopLefTradius: wp('6%'),borderTopRighTradius: wp('6%'),paddingHorizontal: wp('5%'),paddingVertical: wp('7%'),},inputContainer: {
        flexDirection: 'row',alignItems: 'center',justifyContent: 'space-between'
    },inputIcon: {
        flex: 1,paddingTop: wp('3%'),alignSelf: 'center'
    },input: {
        flex: 5,marginLeft: wp('4%'),padding: 0
    }

请让我知道原因。 感谢您的关注！

解决方法

我通过为图标和输入字段提供flex值来修复了上述错误。我在图标上输入了“ flex：1”，在输入中输入了“ flex：11”，所以现在它们看起来不错。

androidandroidexporeact-native