React native中Android 的图片加载问题

最新推荐文章于 2021-09-24 21:06:42 发布

WY1605058341

最新推荐文章于 2021-09-24 21:06:42 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： react-native android

本文链接：https://blog.youkuaiyun.com/WY1605058341/article/details/78039825

本文介绍了如何在React Native项目中设置图片资源路径，并通过Image组件加载本地图片。包括项目目录结构、图片放置位置及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目的目录：根目录-->android-->app-->src-->main-->res文件夹下新建drawable文件夹，然后将图片放到该文件夹下。

在代码中使用Image加载图片：需要在import中导入Image组件，其次代码：

import React, {Component} from 'react'
import {
    AppRegistry,
    View,
    StyleSheet,
    Image,
} from 'react-native'

/**
 * 在布局的过程中使用到的所有的控件都必须
 * 在import中先导入控件，之后才能使用
 */
export default class LayoutView extends Component {
    render() {
        return (

            <View style={styles.container}>
                <Image source={{uri:'bb'}}
                       style={{width: 200, height: 200}}/>
            </View>

        )
    }
}

const styles = StyleSheet.create({ //这里的StyleSheet，大小写必须严格控制
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 50,
    }

});


AppRegistry.registerComponent("LayoutView", () => LayoutView);