主页 / 问题

问题[expo]

Martin Hope
Vint Planov
Asked: 2022-06-14 22:00:19 +0000 UTC
  • 1

一个任务！我们从本地文件夹中的 props 中获取到图像的相对链接，我们将 props </View> 中的图像替换为容器组件 <View>

尝试过的选项：

  1. 默认情况下，<Image source={require('')} /> 组件将图片嵌入到应用程序中，但链接不是从props中动态获取的；
  2. < Image source={ {uri : 'http://'} } /> - 不从 assets/ 文件夹中加载，仅从 Internet 加载；
  3. 来自 github github.com/expo/expo-pixi 的 expo-pixi - 无论是通过示例还是通过视频，都无法设置互联网上唯一的 YouTube！除了我，这个世界上没有人需要在 React Native 中处理图片！是的，为图片加载游戏引擎就是这样的事情！

是否有一些简单的东西——比如库/组件——来显示一个简单的 .jpeg 图像？让它比 expo-pixi 图形引擎更容易？- 您无法立即弄清楚...

const Exercise = (props) => {

    return (
        <View style={styles.exercise}>

//////////Не берёт из source={{uri: props.img}}!///////
            <View style={styles.exercise__imgBlock}>
                <Image style={styles.exercise__img} 
                    source={{uri: props.img}} />

////// Или это тоже никак нее работает!/////////
////// Ни по http://, ни по локальным ссылкам /////

                {/* <GLView
                    style={{ flex: 1,  width: '100%', height: '100%' }}
                    onContextCreate={async (context) => {
                        const app = new PIXI.application({ context });
                        const sprite = await PIXI.spriteAsync ( 
                            'https://el-dent.ru/UserFiles/Image/img2484_21094_big.jpg'
                        );
                        
                        app.stage.addChild(sprite);
                    }}
                /> */}
            </View>
            
        </View>
    );
};

const styles = StyleSheet.create({
    exercise: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',

        marginBottom: 10,
        width: '100%',
    },
    exercise__block: {
        width: 30,
        height: 40,
        marginRight: 5,

        borderColor: '#FFC000',
        borderStyle: 'solid',
        borderWidth: 2,
        borderRadius: 10,
    },

    exercise__imgBlock: {
        width: 120,
        height: 80,
        marginRight: 10,
        marginLeft: 20,
        backgroundColor: 'darkgrey',
        borderColor: '#FFC000',
        borderStyle: 'solid',
        borderWidth: 2,
    },
    exercise__img: {
        width: '100%',
        height: '100%',
        // width: 100,
        // height: 100,
        resizeMode: 'contain'
    },

});

react-native expo