React Native - 登录页面：适合屏幕宽度的所有内容（调整图像大小）

Question

Hello here is a visual example of what I'm trying to accomplish:

This is the login screen for my app. I want to make sure that no matter what phone the user is doing everything fits on the screen without having to scroll. What I'm trying to do is make the image height dynamic so that it resizes based on the phone height.

I'm not sure how to approach this right now I have flex box set up and I have two children view inside of it. The bottom view is a fixed height so I set that equal to 220 and then for the top view I'm doing the phone height minus the fixed height.

The image and text are actually a slider that I'm using from here: https://github.com/archriss/react-native-snap-carousel

Again I'm not sure the best way to approach this, but I just want the image to resize depending on phone height. Here is my code:

const phoneHeight = Dimensions.get('window').height;
const phoneWidth = Dimensions.get('window').width;

_renderItem({ item, index }) {
    return (
        <View style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: 25,
            alignSelf: "center"
        }}>
            <View style={styles.ImageWrap}>
                <Image style={styles.imageStyle} source={item.image} />
            </View>
            <View style={styles.TextWrap}>
                <Text style={styles.Title}>{item.title}</Text>
                <Text style={styles.Body}>{item.text}</Text>
            </View>
        </View>
    )
}

    render() {
        return (
            <>
                <SafeAreaView style={styles.app}>
                    <View style={styles.appBody}>
                        <View style={styles.headerWrap}>
                            {/* HEADER CONTENT HERE */}
                        </View>
                        <Carousel
                            layout={"default"}
                            ref={ref => this.carousel = ref}
                            data={this.state.carouselItems}
                            sliderWidth={phoneWidth - 50}
                            itemWidth={phoneWidth - 50}
                            renderItem={this._renderItem}
                            onSnapToItem={index => this.setState({ activeIndex: index })} />
                        <View>
                            {/* Some Text Here HERE */}
                        </View>
                    </View>
                    <View style={styles.footerWrap}>
                        {/* FIXED CONTENT HERE */}
                    </View>
                </SafeAreaView>
            </>
        );
    }
}

const styles = StyleSheet.create({
    loginBody: {
        display: 'flex',
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
    },
    appBody: {
        height: phoneHeight - 220,
    },
    footerWrap: {
        height: 220,
    },
    ImageWrap: {
        height: phoneHeight / 4,        
    },
    imageStyle: {
        height: '100%',
        width: 'auto',
    },
});

Answer 1

I think the best way to deal with this situation is flex and Dimensions . It automatically sizes a component according to the screen size:

<View style={{flex: 1}}>  
  <View style={{flex: .5}}></View>
</View>

flex: 1 corresponds to 100% of screen.

flex: .5 corresponds to 50% of the parent's space, and so on.

It may help you:

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

const SCREENSIZE = Dimensions.get('screen');

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.appBody}>
          <View style={styles.innerBody}>
            <View style={styles.contentBox}>
              <Text>Header</Text>
            </View>
            <View style={{ ...styles.contentBox, flex: .4 }}>
              <Image
                style={styles.logo}
                resizeMethod="cover" # or contain
                source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png' }}
              />
            </View>
            <View style={styles.contentBox}>
              <Text>Some text here</Text>
            </View>
          </View>
        </View>
        <View style={styles.appFooter}>
        </View>
      </View >
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffa9aa',
  },
  appBody: {
    flex: .78,
  },
  innerBody: {
    alignItems: 'center',
    flex: 1,
    paddingVertical: SCREENSIZE.height * .08,
    paddingHorizontal: SCREENSIZE.width * .2,
    justifyContent: 'space-between'
  },
  appFooter: {
    flex: .22,
    backgroundColor: 'white'
  },
  contentBox: {
    backgroundColor: 'white',
    width: SCREENSIZE.width * .8,
    flex: .2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: SCREENSIZE.width * .4,
    height: SCREENSIZE.width * .4,
  },
})

result: