Question

我要并排显示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',
  }
});

Answer 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'

并排显示2张图片，其中包含

1 个答案: