Center Image React Native Loading Screen

问题

Background

I have an image placed on a screen meant to show when the screen loads other content.

I want to center the image so it is always center on all devices.

Problem

Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.

Question

What is the solution to make sure the image is always centered and the right size for all devices?

Example,

My current code,

In Photoshop

Image is 300 Resolution Height is 776 px Width is 600 px

I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.

import React from 'react';
import {
  StyleSheet,
  View,
  Image,
} from 'react-native';

const logo = require('../images/logo.jpg');

const LoadingScreen = () => (
    <View>
        <Image
            style={styles.logo}
            source={logo}
        />
    </View>
);

const styles = StyleSheet.create({
    logo: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 300,
        height: 400,
    },
});

export default LoadingScreen;

回答1:

You need to set the style of <View> for justifyContent andalignItemsfor centering the`.

Should be like this :

const LoadingScreen = () => (
<View style={styles.container}>
    <Image
        style={styles.logo}
        source={logo}
    />
</View>
);

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 300,
    height: 400,
  },
});

Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it center vertically.

回答2:

The View container should have styling as

flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'

The height makes sure it spans throughout the page, thus making the image become both vertically and horizontally aligned.

For the image size, I think using percentage will do the trick instead of defining definite width/height.

回答3:

just define it at your CSS than call the class on HTML

<view class="image-logoContainer">        
  <image class="image-logo"
     :source="imgLogo"
  />
  <text class="text-color-primary">To-List App</text>
</view>

.image-logoContainer{
  justify-content: center;
  align-items: center;
}

来源：https://stackoverflow.com/questions/45685176/center-image-react-native-loading-screen

标签

react-native

jsx