React Native Cookbook
上QQ阅读APP看书,第一时间看更新

There's more...

I'd like to call your attention to the definition of the title style in step 3. Here, we've defined a property called backgroundColor and set transparent as its value. As a good exercise, let's comment this line of code and see the result:

On iOS, the text will have an orange background color and it might not be what we really want to happen in our UI. In order to fix this, we need to set the background color of the text as transparent. But the question is, why is this happening? The reason is that React Native adds some optimizations to the text by setting the color from the parent's background color. This will improve the rendering performance because the rendering engine won't have to calculate the pixels around each letter of the text and the rendering will be executed faster.

Think carefully when setting the background color to  transparent. If the component is going to be updating the content very frequently, there might be some performance issues with text, especially if the text is too long.