Categories
REACT NATIVE SCRIPT

Quản lý ảnh trong React Native

Bài trước mình đã hướng dẫn các bạn về React Navigation, tiếp theo là một tip khi code React Native nhé. Khi làm một project React Native các bạn có thể sẽ cần dùng ảnh để làm icon hoặc logo vậy làm sao để quản lý chúng một cách hợp lý?

Bài trước mình đã hướng dẫn các bạn về React Navigation, tiếp theo là một tip khi code React Native nhé. Khi làm một project React Native các bạn có thể sẽ cần dùng ảnh để làm icon hoặc logo vậy làm sao để quản lý chúng một cách hợp lý?

Bài này mình sẽ nói về cách mình quản lý ảnh trong những project của mình nhé.

Bình thường trong mỗi ứng dụng sẽ có một thư mục chứa ảnh:

src 
   |--resources
      |--icons
         |--hanoi-train-station-light.png
         |--hanoi-train-station.png
         |--hanoi-train-street.png

Và mỗi lần gọi thì chúng ta phải dùng đoạn code như sau:

<Image source={require('../resouces/hanoi-train-station-light.jpg')}/>

Nó sẽ gây ra vấn đề:

  • Lúc nào chũng ta cũng phải viết lại đoạn path đó
  • Không thể bê nguyên đoạn code đó sang chỗ khác vì sai path

Vậy nên khi code mình sẽ viết một đoạn script để đưa các path đó vào 1 file images.js

Bạn cần 1 file script scripts/image.js trong project như sau:

const fs = require('fs');
const imageFileNames = () => {
  const array = fs
    .readdirSync('src/resources/icons')
    .filter(file => {
      return file.endsWith('.png');
    })
    .map(file => {
      return file
        .replace('@2x.png', '')
        .replace('@3x.png', '')
        .replace('.png', '');
    });
  return Array.from(new Set(array));
};
const generate = () => {
  let properties = imageFileNames()
    .map(name => {
      return `${name.replace(/-/g, '_')}: require('../icons/${name}.png')`;
    })
    .join(',\n  ');
  const string = `const images = {
  ${properties}
}
export default images
`;
  fs.writeFileSync('src/resources/icons/index.js', string, 'utf8');
};
generate();

Các bạn cần thêm script images trong package.json:

  "scripts": {
    "images": "node scripts/images.js"
  },

Và sau đó chỉ cần chạy script trên command line:

npm run images

Đoạn code trên sẽ lấy tất cả những files trong resources/icons và tạo 1 file index.js ngay trong folder icons đó:

src 
   |--resources
      |--icons
         |--hanoi-train-station-light.png
         |--hanoi-train-station.png
         |--hanoi-train-street.png
         |--index.js

Với nội dung như sau:

const images = {
  hanoi_train_station_light: require('../icons/hanoi-train-station-light.png'),
  hanoi_train_station: require('../icons/hanoi-train-station.png'),
  hanoi_train_street: require('../icons/hanoi-train-street.png')
}
export default images

Vậy là ta chỉ cần import từ một file như thế này:

<Image source={images.hanoi_train_station}/>

Giờ thử so sanh giữa 2 đoạn code nhé:

Mình vẫn demo trên repo HaNoiTrainStreet nhé:

5 replies on “Quản lý ảnh trong React Native”

Leave a Reply

Your email address will not be published. Required fields are marked *