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

Question

您好，这是我正在尝试完成的视觉示例：

这是我的应用程序的登录屏幕。 我想确保无论用户使用什么手机，一切都适合屏幕，而无需滚动。 我要做的是使图像高度动态化，以便它根据手机高度调整大小。

我现在不知道如何处理这个问题我已经设置了弹性盒子，并且我有两个孩子在里面view 。 底部view是固定高度，因此我将其设置为220 ，然后对于顶部view ，我将手机高度减去固定高度。

图像和文本实际上是我从这里使用的 slider： https://github.com/archriss/react-native-snap-carousel

同样，我不确定解决此问题的最佳方法，但我只想根据手机高度调整图像大小。 这是我的代码：

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

我认为处理这种情况的最好方法是flex和Dimensions 。 它会根据屏幕大小自动调整组件的大小：

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

flex: 1对应于 100% 的屏幕。

flex: .5对应于父级空间的 50%，依此类推。

它可以帮助您：

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,
  },
})

结果：