React Native中需要带有自动DPI路径附加的映像
是指在开发React Native应用时，为了适配不同分辨率的设备，需要使用带有自动DPI路径附加的映像。
在React Native中，可以使用Image组件来加载和显示图片。为了适配不同分辨率的设备，可以使用自动DPI路径附加的映像。这种映像会根据设备的DPI（每英寸像素密度）自动选择合适的图片资源。
React Native提供了一种命名约定来支持自动DPI路径附加的映像。在项目的根目录下，可以创建一个名为"images"的文件夹，并在该文件夹下创建不同DPI的子文件夹，例如"mdpi"、"hdpi"、"xhdpi"等。然后将相应DPI的图片资源放置在对应的子文件夹中。
在代码中使用Image组件加载图片时，只需要指定图片的文件名即可，React Native会根据设备的DPI自动选择合适的图片资源。例如：
<Image source={require('./images/myImage.png')} />上述代码中，React Native会根据设备的DPI自动选择合适的图片资源，无需手动指定具体的DPI路径。
这种自动DPI路径附加的映像在React Native开发中非常实用，可以方便地适配不同分辨率的设备，提供更好的用户体验。
腾讯云提供的相关产品和服务中，与React Native中需要带有自动DPI路径附加的映像相关的产品包括：
- 腾讯云对象存储（COS）：用于存储和管理图片资源，可以根据需要创建不同DPI的子文件夹，并将相应DPI的图片资源上传到COS中。详情请参考：腾讯云对象存储（COS）
- 腾讯云移动直播（MLVB）：用于实时推流和播放音视频内容，可以在移动直播中使用自动DPI路径附加的映像。详情请参考：腾讯云移动直播（MLVB）
以上是关于React Native中需要带有自动DPI路径附加的映像的完善且全面的答案。
相关·内容
6回答
我使用的是react原生的0.14.1
react-native run-android
[3:10:56 PM] <START> find dependencies
Unable to resolve module image!ic_action_android_back_white3 from /Users/lion/Desktop/Developer/AwesomeProject/NewTrackActivity.js
Unable to resolve module image!ic_action_android_back_white3 from /Users/lion/
浏览 12提问于2015-12-08得票数 8
回答已采纳
我看到一个崩溃与可能的内存泄漏有关，因为我的react原生应用程序上的图像。我不能重现，但每次我部署到play商店时，我的一个预启动设备(运行android 7.0的Moto Z)崩溃，并显示以下错误(下面是完整堆栈跟踪！)。
com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'defaultSrc' of a view managed by: RCTImageView
我不能重现我自己，并且总是看到只有Moto Z的崩溃(其他10个设备工
浏览 0提问于2019-08-21得票数 0
我在windows 8.1上安装React-Native时遇到问题。我已经用npm install -g react- native -cli安装了react native，但是当我执行react-native init Myproject时，我得到了react-native: command not found。我使用的是一个提升的Powershell，所以这是相当令人沮丧的。需要你的帮助
浏览 12提问于2017-01-20得票数 1
我是新的反应-本机和试图渲染图像在不同的android设备上的新闻部。需要帮忙。
获取设备DPI的代码是-
import {PixelRatio} from 'react-native';
const PDI = PixelRatio.get();
var localPath='';
if(PDI == 1){
localPath = '../../assets/img/drawable-mdpi'
}
else if(PDI == 1.5){
localPath = '../../assets/img/drawabl
浏览 4提问于2020-08-29得票数 2
我试图运行我的IOS应用程序与反应本机，但我需要更新我的Pods。所以我在航站楼上跑：
cd iOS && pod install
但我在标题上有个错误
internal/modules/cjs/loader.js:888
throw err;
^
Error: Cannot find module '/Users/my-user/Documents/Test/my-app/ios/undefined'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885
浏览 23提问于2022-07-13得票数 0
回答已采纳
1回答
我在android上遇到了一个反应本地应用的问题，
应用程序是使用世博开发的。
应用程序在iOS设备和iOS模拟器上运行良好
运行在android模拟器上的在启动时发出警告.
可能未处理的拒绝承诺(id: 0)：
TypeError:网络请求失败
仿真器的误差图像附后。
对fetch的任何后续调用都挂起以下错误
未处理的承诺拒绝: TypeError:网络请求失败
node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_node_modules/react-native/Libraries/Core/T
浏览 6提问于2020-12-14得票数 0
我试图做一个基本的反应本地应用程序，在主页上，一个人的图片将显示和点击，一个新的视图将打开，并有该特定的人的所有细节。我可以打印这个人的名字，但是不能显示他的图像，这是由人名本身保存的。示例-如果名称为XYZ，则图像名为XYZ.jpg。
import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback} from 'react-native';
import { createSta
浏览 0提问于2018-06-19得票数 1
回答已采纳
在Xcode 13.4.1中的的Macbook M1上构建成功后，获得呈现错误：
在带有英特尔芯片的Macbook上，同样的应用程序构建时没有任何错误。我试着重新安装react导航：
npm install @react-navigation/native
以及可靠的套餐：
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
制作后：
浏览 14提问于2022-10-12得票数 0
当将FastImage与我的react本地应用程序集成时，我得到了以下错误：
代码：-
import FastImage from "react-native-fast-image";
const qmeLogoURL = require('../../assets/splash-screen/logo.png');
<FastImage
style={styles.image}
source={Logo}
/>
package.json
"dependencie
浏览 3提问于2020-08-08得票数 0
我是React Native的初学者。我今天就开始学了。我试图在屏幕上显示一个图像，但我在这里遇到了一些问题。
我的代码
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={{ uri: 'https://i.imgur.com/G1iFNKI.jpg
浏览 0提问于2021-10-03得票数 0
我都快疯了想让这玩意儿起作用。
因此，看起来，在React Native中，Android将永远缓存某个URL的图像。如果我更改了该网址上的图片，它在安卓应用程序中不会改变，但iOS可以很好地处理它。
我知道如何简单地添加
`?time=${Date.now()}`
添加到source={{ uri }}中指定的uri的末尾
然而，这将每次获取一个新的图像，这在技术上是可行的，但之后用户每次都必须等待图像加载。我可以在图像加载时添加一个ActivityIndicator占位符，但是如果我可以正确地缓存图像，那么该ActivityIndicator就不会经常显示，从而使用户体验更好。
我想知道是
浏览 16提问于2019-07-23得票数 1
2回答
所以我试着使用原生基地的Solito初学者：
这是我第一次尝试与Next合作，我正试图获得世博会的形象支持。
根据世博会文件：
我应该能够使用next-image，我正在这样做：
const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')
module.exports = withNativebase(
withImages({
dependencies: [
'@expo/
浏览 5提问于2022-07-27得票数 6
1回答
在安装expo图像选择器之前，该构建运行良好。但是，即使在移除包后，它现在也不起作用。
这是build命令。
eas build -p android --profile preview2
android和ios的构建都失败了。这看起来像是图像错误，我从我的应用程序中删除了所有的图像，但是问题仍然存在。
这是我的package.json
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "
浏览 8提问于2022-05-29得票数 1
我试图在React Native应用程序上使用axios连接到yelp api，但我得到了上面提到的错误:以下是完整版本：
[Unhandled promise rejection: Error: Request failed with status code 404]
- node_modules\axios\lib\core\createError.js:15:17 in createError
- node_modules\axios\lib\core\settle.js:16:9 in settle
- node_modules\axios\lib\adapters\xhr.js:52
浏览 10提问于2020-02-29得票数 0
我正在使用WebStorm启动一个新项目，但在模板列表中找不到用于运行React的模板配置。在我见过的示例中，选择它而不是React Native，它对我来说并不存在。
请建议我应该在哪里寻找，我已经搜索了答案，并更新了我的IDE。我可以使用npm start，但我真的需要热重新加载来进行开发。
浏览 4提问于2021-11-21得票数 0
1回答
尝试使用带有ESM配置的Jest测试本机组件，并获得Jest无法解析来自'react-native'的导入的错误。错误看起来如下：SyntaxError: The requested module 'react-native' does not provide an export named 'StyleSheet'。知道我做错什么了吗？
RN版本：0.70.4
示例组件：
import React, { ReactElement } from 'react';
import { StyleSheet, Text, View }
浏览 21提问于2022-11-06得票数 0
我正在开发一个带有Reactinative5的应用程序，并试图从ResiveNavigation5迁移到6。为此，我遵循了指南中的步骤。
“反应和反应”的版本如下：
"react": "17.0.2",
"react-native": "0.67.2",
我已经安装了这些软件包：
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/native": "^6.0.8",
"@react-na
浏览 28提问于2022-02-23得票数 2
回答已采纳
我正在使用react-native-image-to-pdf库将图像转换为pdf在我的反应本地应用程序。来自
var photoPath = ['https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350','https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350'];
const myAsy
浏览 12提问于2022-03-05得票数 0
1回答
我在TouchableOpacity中嵌套了一个图像。当按下时，它允许我选择一个图像(配置文件图片)，然后它应该将它的图标更改为选定的图片。当我加载页面时，TouchableOpacity在那里，但占位符图像不加载。当我按下TouchableOpacity并选择一个图像时，将显示选定的图像。
import React, {Component} from 'react'
import {View,Text,Image,Button,ImageBackground,TextInput,TouchableOpacity} from 'react-native'
imp
浏览 1提问于2019-04-27得票数 0
回答已采纳
2回答
我试着在一个光秃秃的应用程序(只是反应-本机init)中安装react-本机-跟踪播放器。
之后
yarn add react-native-track-player
yarn add react-native-swift
cd ios
pod instal
我收到消息：
好了！../node_modules/react-native-track-player) CocoaPods无法找到兼容的CocoaPods版本:在Podfile: react本机-跟踪播放器(来自../node_modules/react-native-track-player)规范中，可以找到满足react-nat
浏览 5提问于2020-02-27得票数 2
1回答
我在Github的一篇文章中读到“我正在使用react-native v0.59.9，它使用gradle v5.4.1”。我使用React Native已经有一段时间了，可以在Android上模拟，但我不记得曾经安装过Gradle。当我创建React Native应用程序时，它会自动附带Gradle吗？如果是这样，我是否需要担心Gradle版本，或者给定的React Native版本总是带有相应的Gradle版本？
浏览 63提问于2019-11-23得票数 2
从一个新项目(npx react-native init MyTestApp)开始，当我运行npm list @react-native-community/cli时，我得到： MyTestApp@4.1.0 /Users/user/Desktop/Projects/MyTestApp
└── (empty) 更大的问题是我不能运行pod install，我得到： throw err;
^
Error: Cannot find module '/MyTestApp/node_modules/@react-native-community/cli/build/bin.
浏览 107提问于2020-04-07得票数 2
我看过许多文档和示例，但我似乎仍然不太理解如何在React Native中使用带有TypeScript的功能组件的forwardRef。下面是一个示例，其中我创建了一个带有自定义函数的MyCustomComponent，我尝试通过创建ref从父级调用该函数。但是，由于ref的定义不正确且为null，我显然收到了一条错误消息，告诉我该函数不存在。请帮助我理解如何在React Native中正确使用forwardRef。提前感谢！
interface MyCustomComponentProps {
title: string
}
const MyCustomComponent: React
浏览 2提问于2020-10-23得票数 12
回答已采纳
我有一个Reactive原住民应用程序，其中有一些带有调用某些端点的方法的文件。当我试图运行时，Jest会在导入的本地文件中抛出一个错误。
我有下一个package.json
{
"name": "appName",
"version": "1.0.0",
"description": "some description",
"main": "index.js",
"scripts": {
"test"
浏览 11提问于2021-05-17得票数 3
回答已采纳
基于ADO管道文档和几个这样的问题/答案，应该可以在一个步骤中构建一个映像，然后在另一个步骤中将其推送到ACR。
我遇到了“*/”-prefix问题，它是在构建步骤中获取ACR前缀的图像名称，中的链接，所以答案(以及其他)。
我应该处理这个问题，但是我仍然会遇到推送作业找不到图像的错误。
下面是我的管道的一个简短版本(边注:我需要将图像作为一个伪制品发布，并在以后的多个阶段下载它。我不想多次建造它)。
'myacrregistry.azurecr.io'The 编译步骤工作保存图像步骤检测图像当前缀为发布伪影step works，加载图像步骤在下一阶段工作推送图像步骤失败，输出
浏览 11提问于2022-01-20得票数 1
2回答
使用FCM打开不在后台的应用程序
、、、、
我的项目是基于android的jitsi meet。我计划使用react-native和firebase。要求是，如果一个人呼叫另一个人，他们将收到一个带有铃声的呼叫屏幕。如果应用程序不在后台运行，我如何实现这一点？
浏览 1提问于2020-07-08得票数 1
下面是我的代码：
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View ,
ImageBackground } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, flexDirection: 'column
浏览 0提问于2018-09-08得票数 0
我正面临这样的错误“
参数列表太长:递归头展开失败
“使用带有react-native-fcm和react-native-fbsdk的两个库来响应本地项目，有什么想法可以解决这个问题吗？
我发现在GitHub中，对于来说，这是一个悬而未决的问题，但是，那里的解决方案并没有帮助我。
有人知道那个问题的解决办法吗？
浏览 1提问于2018-02-02得票数 2
回答已采纳
我已经创建了一个正确安装的PWA，带有一个启动程序图标。我想要一个不同的屏幕图像，所以我包含了192 px和512 px png，都是128 144，并在manifest.json中列出了它们-然而，我的启动屏幕仍然显示启动图标(我已经提供了36，48，72，96,128,144 px版本)。
如何确保正确的图像被用于启动屏幕和启动图标？
manifest.json：
{
"short_name": "app",
"name": "app",
"icons": [
{
"sr
浏览 0提问于2018-12-16得票数 3
回答已采纳
我用react-native制作ios和android应用程序。
我正在寻找的方法，我可以种植一些文件在项目中之前，我建立的应用程序，并访问它后，它将运行。
我知道一些模块，比如"RNFetchBlob“或"react-native-fs”。这样我就可以创建、读取和写入一些文件
但我没有任何想法，把它放在应用程序之前，它将被建立。
如何在应用程序运行之前放入一个文件？我能得到一些关于这方面的线索或示例代码吗？
浏览 20提问于2021-10-06得票数 0
我在Android中的项目中安装了react本机映射，但是在我的项目中，错误总是出现，编译良好，但在ios中执行时有错误：
console.error：“react原生映射: AirGoogleMaps dir必须添加到您的xCode项目中，以支持iOS上的GoogleMaps”。
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.48.4",
"react-native-maps": "^ 0.17
浏览 1提问于2017-11-08得票数 0
回答已采纳
1回答
这是我在运行npm以安装我试图运行的应用程序的依赖项时所面临的问题。我对Node很陌生，我的反应是：
> cd core && npm ci
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-native-fs@2.18.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! peer react@"17.0.2" fro
浏览 19提问于2022-11-08得票数 0
我正在尝试发布我的第一个Android / React本地应用程序。
我遵循“签名你的应用”谷歌页面()和“生成签名的APK”反应本地页面()，我不能正确地生成APK。
你有什么想法吗？谢谢。
我有一个奇怪的错误信息“没有这样的规模”时，试图生成签名的APK。keystore文件不在项目中，所以签名信息不在应用程序项目中。
我试过了
rm -rf node_modules &&纱线安装
Android > File >失效缓存/重新启动
APK代
$./gradlew assembleRelease --stacktrace --info
浏览 1提问于2018-07-21得票数 3
回答已采纳
我使用Expo，并将expo eject分开用于模块使用。
我在iOS文件中尝试了iOS。那是工作。
吊舱安装完毕！Pod文件中有51个依赖项，总共安装了63个荚。
但是，当打开Xcode并按下build and run按钮时，会发生错误。
package.json：
{
"name": "testgame",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-cl
浏览 2提问于2019-05-08得票数 0
回答已采纳
我使用以下命令创建了一个React原生项目：
react-native init samplerouting
然后，我使用以下步骤()启用了导航：
1-
npm install @react-navigation/native
2-
npm install
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
@react-native-community/masked-view
3-将以下两行添加到dependencies节中的
浏览 2提问于2020-02-09得票数 1
回答已采纳
我刚刚退出世博，一切都进行得很顺利，但当我尝试用Xcode运行我的ios应用程序时，我得到了以下错误：
没有“RCTAsyncLocalStorage”的可见@接口声明选择器'initWithStorageDirectory:‘
这里是我的package.json的一部分
"dependencies": {
"axios": "^0.17.1",
"expo": "^23.0.6",
"lodash": "^4.17.4",
"moment":
浏览 9提问于2018-01-06得票数 2
回答已采纳
我正在尝试开始使用React Native开发。 我已经安装了Node、create-react-native-app和git。在初始化一个新的React Native项目时，我使用了sudo create-react-native-app my-first-app命令，但我总是遇到全局安装expo-cli的问题： *****:dev *****$ sudo create-react-native-app my-first-app
Password:
$This command requires Expo CLI.
Do you want to install it globally [Y/
浏览 26提问于2019-05-11得票数 1
我想知道如何在其中插入图像？？
我也想知道这是在css上实现的javascript还是在javascript中实现的css？
它是由React Native自动生成的，作为默认的应用程序初学者包，我们刚刚开始掌握基础知识……
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class VLDB extends Component {
render() {
return (
<View style={st
浏览 0提问于2016-04-04得票数 0
4回答
{
"name": "RNNProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react&#
浏览 5提问于2019-03-22得票数 15
我在monorepo中设置了一个原生的react应用程序作为工作空间。我这样做是因为我想在我的移动和web应用程序之间共享我创建的一些react组件。 我的回购的基本结构是： root/
package.json (with nohoist: ["**/expoapp/**"])
modules/
...shared modules, some simple JS, some react
apps/
web/ (cra-based web app)
mobile/
package
浏览 249提问于2021-09-20得票数 2
回答已采纳
2回答
我创建了一个带有图像的tab bar。但是在我的仿真器里，图像看起来很好。但是，在移动中运行apk 时，选项卡条图像看起来很小，的大小很小。因此，我从这个9patch images中创建了，我可以将xyz.9.png图像放在可绘制的文件夹中，但是我可以使用setImageResource (比如img_home.setImageResource(R.drawable.footer_icon1); )，但是如果我使用xyz.9.png作为图像资源，它会显示一个错误。我能把那9磅保持原样吗？我怎么才能解决我的问题。请帮帮我
浏览 2提问于2014-12-08得票数 0
2回答
如何在react native中使用fetch方法将图片上传到laravel服务器？我在我的react原生项目中使用react-native-image-picker，并遵循https://aboutreact.com/example-of-image-picker-in-react-native/包，我的响应是这样的
base64 -> undefined
LOG uri -> file:///data/user/0/proj_name/cache/rn_image_picker_lib_temp_e100eb14-7efc-4aee-aea9-dc9d05a61b51.
浏览 62提问于2021-07-29得票数 0
当我用0.20.0版本构建自己的本机项目时，出现了一个错误：
Looking for JS files in
/Users/rockyl/WorkSpaces/react-native/TinySNS
[13:55:06] <START> Building Dependency Graph
[13:55:06] <START> Crawling File System
[13:55:06] <START> Loading bundles layout
[13:55:06] <END> Loading bundles layout (
浏览 5提问于2016-03-01得票数 2
1回答
当我尝试npm install react-color时，它显示了以下错误：
npm错误！代码EINVALIDPACKAGENAME npm错误！无效包名“@type/”of package“@types/@/本机”：name只能包含对URL友好的字符。
同样的情况也发生在npm install react-dom或其他npm install上。有人能说为什么会这样吗？
下面是我的依赖关系：
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
浏览 6提问于2022-05-17得票数 1
回答已采纳
我正在尝试按照这个指南在React Native中创建一个本机模块。 https://facebook.github.io/react-native/docs/native-modules-setup 当您创建本机模块时，这些是设置说明。 cd react-native-my-library/example
yarn
cd ios
pod install # required starting with React Native 0.60
cd ..
react-native run-ios 我没有example子文件夹，也没有在ios目录中安装pod文件，所以pod install只会给我
浏览 12提问于2019-12-26得票数 0
我正在尝试从源代码构建React Native，以使用我对其Camera Roll函数所做的一些更改。我遵循了该指南，但在尝试编译整个代码时，我遇到了一些彻头彻尾的晦涩难懂的错误。
下面是全部内容：
[armeabi-v7a] Compile++ thumb: yogacore <= Utils.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGEnums.cpp
[armeabi-v7a] Compile++ thumb: yogacore <= YGNodePrint.cpp
[armeabi-v7a] Compile++
浏览 3提问于2018-01-26得票数 14
我正在尝试在WebView中显示一个下载的pdf文件。我正在使用react-native-webview (https://github.com/react-native-community/react-native-webview)和rn-fetch-blob下载它。 基本上，我有一个渲染，它只是一个WebView组件： if(this.state.path)
return
<WebView
source={{ uri: this.state.path }}
style={{ flex: 1 }}
浏览 131提问于2020-01-27得票数 1
回答已采纳
第一，它不是复制的。因为我有不同的问题。我将我的react本地版本升级为'0.62.2‘(我希望我没有升级)。我正在处理许多问题，对吗? now.This是我的问题，现在React-Core在../node_modules/React中找不到podspec，我无法解决它
人们看到，在类似的问题上，总是有错误的道路。但是，即使我写了正确的路径，它也会产生一个错误。此外，当我查看‘./node_node/ see本机’时，我无法在这里看到React文件，我发现了类似的问题和解决方案。如以下示例所示
吊舱安装
分析相依性
从DoubleConversion从../node_modules
浏览 1提问于2020-04-23得票数 0
app.js文件中的代码带有react redux的导入语句，用于显示一个标题，其中包含一个名为"Tech stack“的文本。
App.js
import React from 'react';
import { View } from 'react-native';
import { Header } from './components/common';
import { Provider } from 'react-redux';
import { createStore } from 'redux
浏览 0提问于2019-07-10得票数 4
我试图得到每个pdf页面的图像(高质量)。我正在使用下面的代码，运行在for循环中，直到页面计数并工作为止。
guard let document = CGPDFDocument(pdfurl as CFURL) else { return }
guard let page = document.page(at: i) else { return }
let dpi: CGFloat = 300.0/72.0
let pagerect = page.getBoxRect(.mediaBox)
print(pagebounds)
print(pag
浏览 1提问于2019-05-10得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
