React Native APP set name, logo icon to start page

https://www.jianshu.com/p/727c6057fc0a   References

 

After the completion of the development of APP, we need to modify the APP name and set the application icon and launch page before posting online. Among them, the names and icons used to identify the APP, while the start page, you can enhance the user experience, branding, etc. when the application starts. This article summarizes how complete name, icon and splash page in React Native application settings.

 

 

The following operations are on the side of the Android, IOS, then I see references above link

 

1. Modify the name of the
edited  android/app/src/main/res/values/strings.xml file

<resources>
-    <string name="app_name">test</string>
+    <string name="app_name">测试程序</string>   
</resources>

 

 

2. Modify the application icon

Alternatively  android/app/src/main/res corresponding lower icon.

 

Note : There are two image files, a no less, have the same name

 Recommended to use this tool only needs to drag and drop a picture, you can quickly generate various sizes of pictures you need: https://icon.wuruihong.com/  , attach a picture of this tool, remember the "optional parameter" Do you want about fine-tuning

 

 

 

 

3. To set the startup page (my reference to the information, there are several, due react native updated version, some of the problems, and I will make corrections)

step one,

the Add Native-REACT-the Yarn Splash-Screen   // no need to manually link, high version automatically link

 

Step two, edit android \ app \ src \ main \ java com \ following MainActivity.java \ add the following code

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here


public class MainActivity extends ReactActivity {
    // ...other code
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }   
}

 

Step three, in the android/app/src/main/res/layout creation start page layout files folder  launch_screen.xml: (layout does not exist to manually create)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_image">
</LinearLayout>

// 只需要注意  android:background="@drawable/launch_image"这行， launch_image是你启动图片的名字

 

Step four, the tools to make a good start page pictures of different specifications, into the android \ app \ src \ main \ res \ drawable folder (drawable folder does not exist, manually create)

 

 

Step five : After the above operation into a repackaged application, you can see the start page when restarted. However, the start page will display a short black and white before, we can be handled by setting transparent background. Edit android / app / src / main / res / values / styles.xml document, amended as follows:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
+        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

 

Step Six: Hide start page
so far, you can find open APP after the meeting has been hung in a start page, we can at the right time (such as all the resources ready) call SplashScreen.hide (); to hide the start page.

 

// index.js文件操作
import { AppRegistry } from 'react-native';
import SplashScreen from 'react-native-splash-screen';

import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => {
  SplashScreen.hide();
  return App;
});