仅在 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 display（意外）

Android display（预期）

Answer 1

我看不到您的styles.column 被指定为什么，但作为测试，我也会给您的TouchableOpacity 一个宽度和高度。然后尝试设置justifyContent: center 和alignItems: center 以确保图像没有因某种原因被隐藏。

您可能还需要在 Image 中指定 resizeMode={'contain'} 属性，而不仅仅是在您的图像样式中声明它。