React Native - Mô-đun yêu cầu hình ảnh sử dụng tên động

Tôi hiện đang xây dựng một ứng dụng thử nghiệm bằng React Native. Mô-đun Hình ảnh, cho đến nay vẫn hoạt động tốt.

Ví dụ: nếu tôi có một hình ảnh được đặt tên avatar, đoạn mã dưới đây hoạt động tốt.

<Image source={require('image!avatar')} />

Nhưng nếu tôi thay đổi nó thành một chuỗi động, tôi nhận được

<Image source={require('image!' + 'avatar')} />

Tôi gặp lỗi:

Yêu cầu mô-đun không xác định "image! Avatar". Nếu bạn chắc chắn mô-đun ở đó, hãy thử khởi động lại trình đóng gói.

Rõ ràng đây là một ví dụ giả định, nhưng tên hình ảnh động rất quan trọng. React Native không hỗ trợ tên hình ảnh động?

Điều này được đề cập trong tài liệu dưới phần " Tài nguyên tĩnh ":

Cách duy nhất được phép để tham chiếu đến một hình ảnh trong gói là viết theo nghĩa đen là request ('image! Name-of-the-asset') trong nguồn.

// GOOD
<Image source={require('image!my-icon')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

Tuy nhiên, bạn cũng cần nhớ thêm hình ảnh của mình vào một gói xcassets trong ứng dụng của bạn trong Xcode, mặc dù có vẻ như từ nhận xét của bạn, bạn đã thực hiện xong điều đó.

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets

Điều này đã làm việc cho tôi:

Tôi đã tạo một thành phần hình ảnh tùy chỉnh trong đó có một boolean để kiểm tra xem hình ảnh có từ web hay đang được chuyển từ một thư mục cục bộ.

// In index.ios.js after importing the component
<CustomImage fromWeb={false} imageName={require('./images/logo.png')}/>

// In CustomImage.js which is my image component
<Image style={styles.image} source={this.props.imageName} />

Nếu bạn thấy mã, thay vì sử dụng một trong các mã sau:

// NOTE: Neither of these will work
source={require('../images/'+imageName)} 
var imageName = require('../images/'+imageName)

Tôi chỉ gửi toàn bộ require('./images/logo.png')như một chỗ dựa. Nó hoạt động!

TUYỆT VỜI NẾU BẠN CÓ HÌNH ẢNH (URL):

Cách tôi đã vượt qua sự cố này:

Tôi đã tạo tệp có đối tượng lưu trữ hình ảnh và tên của hình ảnh:

const images = {
  dog: {
    imgName: 'Dog', 
    uri: require('path/to/local/image')
  },
  cat: {
    imgName: 'Cat on a Boat', 
    uri: require('path/to/local/image')
  }
}

export { images };

Sau đó, tôi nhập đối tượng vào thành phần mà tôi muốn sử dụng nó và chỉ thực hiện kết xuất có điều kiện của tôi như sau:

import { images } from 'relative/path';

if (cond === 'cat') {
  let imgSource = images.cat.uri;
}

<Image source={imgSource} />

Tôi biết đó không phải là cách hiệu quả nhất nhưng nó chắc chắn là một cách giải quyết.

Hy vọng nó giúp!

Ví dụ: nếu bạn đang tìm cách tạo danh sách bằng cách lặp qua mảng JSON gồm các hình ảnh và mô tả của mình, thì điều này sẽ hiệu quả với bạn.

1. Tạo một tệp (để chứa cơ sở dữ liệu JSON của chúng tôi), ví dụ: ProfilesDB.js:

const Profiles=[
	  {
	  "id" : "1",
	  "name" : "Peter Parker",
	  "src" : require('../images/user1.png'),
	  "age":"70",
	},
	{
	"id" : "2",
	"name" : "Barack Obama",
	"src" : require('../images/user2.png'),
	"age":"19",
	},
	{
	"id" : "3",
	"name" : "Hilary Clinton",
	"src" : require('../images/user3.png'),
	"age":"50",
	}
]
export default Profiles;

2. Sau đó nhập dữ liệu trong thành phần của chúng tôi và lặp qua danh sách bằng FlatList:

import Profiles from './ProfilesDB.js';

<FlatList
  data={Profiles}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => (
    <View>
      <Image source={item.src} />
      <Text>{item.name}</Text>
    </View>
  )}
/>

Chúc may mắn!

Như Tài liệu React Native nói , tất cả các nguồn hình ảnh của bạn cần được tải trước khi biên dịch gói của bạn

Vì vậy, một cách khác bạn có thể sử dụng hình ảnh động, đó là sử dụng câu lệnh switch. Giả sử bạn muốn hiển thị một hình đại diện khác cho một nhân vật khác, bạn có thể làm như sau:

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "spiderman":
        return require('./spiderman.png');
      case "batman":
        return require('./batman.png');
      case "hulk":
        return require('./hulk.png');
      default:
        return require('./no-image.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

Kiểm tra món ăn nhẹ: https://snack.expo.io/@abranhe/dynamic-images

Ngoài ra, hãy nhớ nếu hình ảnh của bạn trực tuyến, bạn không gặp bất kỳ sự cố nào, bạn có thể làm:

let superhero = "spiderman";

<Image source={{ uri: `https://some-website.online/${superhero}.png` }} />

Đầu tiên, hãy tạo một tệp với hình ảnh được yêu cầu - Hình ảnh gốc của React phải được tải theo cách này.

property / index.js

export const friendsandfoe = require('./friends-and-foe.png'); 
export const lifeanddeath = require('./life-and-death.png'); 
export const homeandgarden = require('./home-and-garden.png');

Bây giờ nhập tất cả nội dung của bạn

App.js

import * as All  from '../../assets';

Bây giờ bạn có thể sử dụng hình ảnh của mình như một giá trị nội suy trong đó imageValue (đến từ phần phụ trợ) giống như tệp cục bộ được đặt tên, tức là: 'homeandgarden':

<Image style={styles.image} source={All[`${imageValue}`]}></Image>

Phần quan trọng ở đây: Chúng tôi không thể nối tên hình ảnh bên trong request như [request ('item' + vairable + '. Png')]

Bước 1: Chúng tôi tạo tệp ImageCollection.js với tập hợp các thuộc tính hình ảnh sau

ImageCollection.js
================================
export default images={
    "1": require("./item1.png"),
    "2": require("./item2.png"),
    "3": require("./item3.png"),
    "4": require("./item4.png"),
    "5": require("./item5.png")
}

Bước 2: Nhập hình ảnh trong ứng dụng của bạn và thao tác nếu cần

class ListRepoApp extends Component {

    renderItem = ({item }) => (
        <View style={styles.item}>
            <Text>Item number :{item}</Text>
            <Image source={Images[item]}/>
        </View>
    );

    render () {
        const data = ["1","2","3","4","5"]
        return (
            <FlatList data={data} renderItem={this.renderItem}/>
        )
    }
}

export default ListRepoApp;

Nếu bạn muốn giải thích chi tiết, bạn có thể theo liên kết bên dưới Truy cập https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

Lịch sự: https://www.thelearninguy.com

import React, { Component } from 'react';
import { Image } from 'react-native';

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
           images: {
                './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
                './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
                './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
            }
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        <Image
                            resizeMode="contain"
                            source={ images['assets/RetailerLogo/1.jpg'] }
                            style={styles.itemImg}
                        />
     </View>
  )}
}

bạn có thể dùng

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

để hiển thị hình ảnh.

từ:

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

Để hình ảnh động sử dụng request

this.state={
       //defualt image
       newimage: require('../../../src/assets/group/kids_room3.png'),
       randomImages=[
         {
            image:require('../../../src/assets/group/kids_room1.png')
          },
         {
            image:require('../../../src/assets/group/kids_room2.png')
          }
        ,
         {
            image:require('../../../src/assets/group/kids_room3.png')
          }
        
        
        ]

}

khi nhấn nút- (tôi chọn số ngẫu nhiên hình ảnh chắc chắn là 0-2))

let setImage=>(){
//set new dynamic image 
this.setState({newimage:this.state.randomImages[Math.floor(Math.random() * 3)];
})
}

lượt xem

<Image
        style={{  width: 30, height: 30 ,zIndex: 500 }}
        
        source={this.state.newimage}
      />

Tôi biết điều này đã cũ nhưng tôi sẽ thêm điều này ở đây vì tôi đã tìm thấy câu hỏi này, trong khi tìm kiếm giải pháp. Các tài liệu cho phép tìm kiếm: 'Hình ảnh Mạng'

https://facebook.github.io/react-native/docs/images#network-images

Đối với tôi, tôi có hình ảnh hoạt động linh hoạt với điều này

<Image source={{uri: image}} />

 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />   

trong trường hợp của tôi, tôi đã cố gắng rất nhiều nhưng cuối cùng nó hoạt động với hình ảnh tên thành phần StyledInput bên trong StyledInput nếu bạn vẫn không hiểu hãy cho tôi biết

Giả sử bạn có một ứng dụng có chức năng tương tự như ứng dụng của tôi. Nơi ứng dụng của bạn chủ yếu ngoại tuyến và bạn muốn hiển thị các Hình ảnh lần lượt. Dưới đây là cách tiếp cận phù hợp với tôi trong React Native phiên bản 0.60.

1. Đầu tiên, hãy tạo một thư mục có tên Tài nguyên / Hình ảnh và đặt tất cả hình ảnh của bạn vào đó.
2. Bây giờ, hãy tạo một tệp có tên Index.js (tại Tài nguyên / Hình ảnh), tệp này có trách nhiệm Lập chỉ mục tất cả các hình ảnh trong thư mục Nguồn / Hình ảnh .

const Images = {'image1': demand ('./ 1.png'), 'image2': request ('./ 2.png'), 'image3': request ('./ 3.png')}

3. Bây giờ tạo một Thành phần có tên ImageView theo lựa chọn của bạn về thư mục. Người ta có thể tạo chức năng, lớp hoặc thành phần hằng số. Tôi đã sử dụng thành phần Const. Tệp này có nhiệm vụ trả về Hình ảnh tùy thuộc vào Chỉ mục.

import React from 'react';
import { Image, Dimensions } from 'react-native';
import Images from './Index';
const ImageView = ({ index }) => {
    return (
        <Image
            source={Images['image' + index]}
        />
    )
}
export default ImageView;

4. Bây giờ từ thành phần bất cứ nơi nào bạn muốn hiển thị động Hình ảnh tĩnh, chỉ cần sử dụng thành phần ImageView và chuyển chỉ mục.

   <ImageView index = {this.qno + 1} />

Bạn nên sử dụng một đối tượng cho điều đó.

Ví dụ: giả sử rằng tôi đã thực hiện một yêu cầu AJAX tới một API và nó trả về một liên kết hình ảnh mà tôi sẽ lưu ở trạng thái imageLink:

source={{uri: this.state.imageLink}}