React-Navigation 性能：多少屏幕太多了？

Question

I am new to both Recact Native and React-Navigation. The app I am planning is super content heavy. It will have several hundred unqique screens. I want to connect them via React-Navigation so my stack is going to be quiet large. Is there an issue with that performance wise or anything I should keep in mind? My guess is that a screen is only loaded when the user is accessing it for the first time, so the initial loading time of the app should not be affected?

Thanks!

Answer 1

Actually it doesn't matter how may js files are you creating but it matters when you are:

1. Not Reusing your code. For example you create a 3 Screens which uses a Card so it didn't create a card component js file separately then the complexity is increasing but if you create a JS file for Card and reuse it in 3 screens it optimised this. So if you this this component will be reusable then create separate file for it.
2. Using Dimension too much. I know when using dimensions the Screen design is responsive but at abstract level it calculate height, width every time for every screen so it is not an optimized way. So try to use flex and also try to reduce usage of Dimension. But if you use Dimension wisely it is very powerful tool.

3)Try to use FastImage instead of image when you want to show images using FlatList, Map etc. In short if images in a single screen is render more than twice.

4. You can get more info here: Optimization in React-Native

Note: At Last i want to say that you can create as much as JS files but it must be reusable, not unnecessary and no repeated code there.

Answer 2

You can also consider this as a performance improvement.

You have a screen. When you push or navigate a new screen on it. You can stop the animations in the background screen. Because the screen in the back continues to work. So you can stop animating the background screen.

For example, you have a slider component in the home screen and. This slider autoplay feature is active. When you change the home screen you can stop the autoplay feature.