Ошибка рендеринга локального изображения c только в iOS (React Native)

Question

Я новичок в кодировании и реагирую нативно, поэтому извините, если это глупый вопрос.

У меня проблемы с рендерингом значка гамбургера из следующего кода. Он работает как положено на Android, но не iOS.

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { totalPoints, totalBucks } from '../datasets/UserData.js';

export class Navbar extends React.Component {
    constructor(props){
        super(props);
    }

    burgerPress = value => {
        this.props.onPress();
       }

render(){
var points = totalPoints;
var bucks = totalBucks;

    return(
        <View style={styles.row}>
            <Text style={styles.column} />
            <Text style={styles.column}>
                <Image source={require('../../assets/coins.png')}  style={{ width: 30, height: 30, resizeMode: 'contain'}}/> 
                 {"  "}{ points }
            </Text> 
            <Text style={styles.column}>
                <Image source={require('../../assets/bills.png')}   style={{ width: 40, height: 40, resizeMode: 'contain'}}/> 
                {"  "}{ bucks }
            </Text>
            <View style={styles.column}>
            <TouchableOpacity onPress={() => this.burgerPress()} style={{width: 40, height: 40, justifyContent: 'center', alignItems: 'center'}}>
                <Image source={require('../../assets/hamburger.png')} resizeMode={'contain'} style={{ width: 40, height: 40, backgroundColor: 'lightblue', tintColor: '#ffffff',  justifyContent: 'center', alignItems: 'center'}}/> 
            </TouchableOpacity>
            </View>
        </View>
        );
};
};

const styles={
    row: {
        flex: 1,
        alignItems: 'flex-end',
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: "#000000",
        padding: 5,
        justifyContent: 'center'
    },
    column: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'center'
    }
}

Значки монет и банкнот правильно загружаются на обеих платформах. Гамбургер загружается на android, но на iOS все, что я получаю, это цвет фона. Если я удаляю backgroundColor и tintColor, он ничего не рендерит, поэтому я думаю, что проблема заключается в том, что он вообще не импортирует изображение, а только на iOS. Есть ли способ заставить это работать?

iOS дисплей (неожиданно)

Android дисплей (ожидается)

Answer 1

Я не вижу, для чего указаны ваши styles.column, но в качестве теста я бы также дал вашим TouchableOpacity ширину и высоту. Затем попробуйте установить justifyContent: center и alignItems: center, чтобы убедиться, что изображение по какой-то причине не скрыто.

Возможно, вам также понадобится указать resizeMode={'contain'} проп в Image, а не просто объявить его в стиле вашего изображения.