如何在Android代码中居中LinearLayout内的图文（React Native Navigation场景）

Hey there! I totally get it—diving into Android layout code when you’re used to React Native can feel overwhelming. Let’s get that image and text centered in your LinearLayout for the splash screen, nice and easy.

Here’s the corrected layout code (with explanations): #

Save this as res/layout/splash_screen.xml in your Android project:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#FFFFFF"> <!-- Replace with your splash background color -->

    <!-- Splash Screen Logo -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/your_splash_logo" <!-- Replace with your image resource name -->
        android:adjustViewBounds="true"
        android:layout_marginBottom="24dp"/> <!-- Space between logo and text -->

    <!-- App Name/Tagline -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Your Awesome App"
        android:textSize="24sp"
        android:textColor="#333333"/> <!-- Adjust text color as needed -->

</LinearLayout>

Key changes that fix the centering: #

• android:gravity="center" on LinearLayout: This is the magic line! Unlike layout_gravity (which controls how the LinearLayout sits inside its parent), gravity tells the LinearLayout to align all its child views (your image and text) both horizontally and vertically in the center.
• android:orientation="vertical": Ensures your image sits above the text, which is standard for splash screens.
• android:adjustViewBounds="true": Prevents your logo from getting stretched or squashed—it keeps the original aspect ratio intact.
• layout_marginBottom: Adds a little breathing room between the logo and text so things don’t look cramped.

Linking this to React Native Navigation: #

Once your layout is ready, you need to tell RNN to use it as the splash screen. Open your AndroidManifest.xml and update your main activity entry with this meta-data tag:

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <!-- Tell RNN to use your splash layout -->
    <meta-data
        android:name="com.wix.reactnativenavigation.splash_layout"
        android:resource="@layout/splash_screen"/>
</activity>

That’s it! Build and run your app, and your splash screen elements should be perfectly centered now. If you need to tweak spacing or sizes, just adjust the dp values or text properties—no fancy Android skills required.

内容的提问来源于stack exchange，提问作者warl0ck