Показать 2 изображения рядом и в комплекте

Question

Я хочу отображать 2 изображения рядом, 1 слева, 1 справа, каждое изображение должно быть в половине размера экрана.Я следовал [учебник по flexbox] (https://facebook.github.io/react-native/docs/flexbox), но все еще возникают проблемы: изображение1 и изображение2 не содержатся и занимают большую часть экрана (я хочу, чтобы изображение 1 начиналось слева и не выходило за серединуэкран - и изображение2 начинается с середины и занимает место до левой части экрана).

Вы знаете, как это сделать?

   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'