如何使用 React Native 将图像拆分为小部分并在单击时显示它们？

Question

This is what I'm aiming to achieve I'm making a small quiz game in React Native where you guess the image by clicking on different parts of it. Initially the image is behind multiple small "blocks" and by clicking on them they disappear. How can achieve this functionality in the most elegant way? I was thinking of making multiple small Views each with the same size and onclick they would disappear. Is this a good approach? Here's the image of what I'm aiming to achieve: Guess image app

Answer 1

In my opinion, your approach is the only one. If you try to split your image, there will be somethings you have to deal with:

1. You might have to use some tools to split your image into smaller one. Because the tool's functionalities, the number of your images, the size of image and the way you include and manage your images in your app, this is really unnecessary, unless you want to show off your skills.
2. With 1 image, if you want to make that level harder, eg: create more blocks to hide it, you have to split that image again. Even if you have libraries to do that, your performance will be affected seriously.

And these are some props when you use blocks :

1. No need to split image (of course), so say good bye to libraries that decrease your perfomance.
2. You can do many things with those blocks , eg: increasing the difficult by adding more blocks, creating block's animation like rolling or phasing, etc.
3. If you don't want to set absolute position to your <Image/> component, RN has built in <ImageBackground/> component to meet up your requirements.