并排显示 2 张图像并包含在内答案

【问题标题】：Display 2 images side by side and contained并排显示 2 张图像并包含在内
【发布时间】：2023-03-22 04:45:02
【问题描述】：

我想并排显示 2 个图像，1 个在左侧，1 个在右侧，每个图像应该包含在屏幕的一半大小中。我遵循 [flexbox 教程] (https://facebook.github.io/react-native/docs/flexbox) 但仍然有问题： image1 和 image2 不包含并占据屏幕的很大一部分（我希望图像 1 从左侧开始并且不会越过屏幕中间 -和 image2 从中间开始，占据屏幕左侧的空间）。

你知道怎么做吗？

   render() {
    return (
      <View style ={styles.container}>
         <ImageBackground
              source={require("./images/background.jpg")}
              style={styles.background}>

            {/* It is in this part I have a problem */}
            <View style ={styles.imageContainer}>
              <View style ={{flex:1}}>
                  <Image resizeMode='contain'
                         style ={styles.image}
                         source={require("./images/image1.png")}/>
              </View>
              <View style ={{flex:1}}>
              <Image resizeMode='contain'
                     style ={styles.image}
                     source={require("./images/image2.png")}/>
              </View>
            </View>
        </ImageBackground>
      </View>
     );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    alignItems: 'center',
  },
  image: {
    flex: 1,
    alignItems: 'center',
  },
  background: {
    width: '100%', 
    height: '100%',
    alignItems: 'center',
  }
});

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

您必须提供图像的宽度和高度，才能达到要求。

你可以试试这个吗？

 render() {
    return (
      <View style ={styles.container}>
         <ImageBackground
              source={require("./images/background.jpg")}
              style={styles.background}>

            {/* It is in this part I have a problem */}
            <View style ={styles.imageContainer}>
              <Image resizeMode='contain'
                         style ={{width: Dimensions.get('window').width/2, height: Dimensions.get('window').width/2}}
                         source={require("./images/image1.png")}/>
              <Image resizeMode='contain'
                     style =style ={{width: Dimensions.get('window').width/2, height: Dimensions.get('window').width/2}}
                     source={require("./images/image2.png")}/>
            </View>
        </ImageBackground>
      </View>
     );
  }
}

别忘了导入，

import { Dimensions } from 'react-native'

【讨论】：