Expo - 圖標 position 在 Android 模擬器中不正確

Question

希望你在這個大流行期間保持健康。 我的 expo 應用程序中有一個問題。 請檢查所附圖片

iOS 狀態

以下來自Android

Android 狀態

如您所見，Android 上密碼字段圖標的 position 不正確。 代碼如下所示。

    <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%'),
        backgroundColor: '#fff',
        padding: 0
    }

請讓我知道原因。 感謝您的關注！

Answer 1

我通過為圖標和輸入字段賦予 flex 值來修復上述錯誤。 我給圖標“flex:1”和“flex:11”給輸入，所以現在它們看起來不錯。