css - 显示弹性宽度的问题

Question

我正在设计一个具有图像背景并且徽标包含在背景图像中的应用程序，因此我的内容需要在该徽标之后开始，大约是页面的一半，我的问题是如何控制容器的宽度类要小一点，因为正如您在图像中看到的那样，它是全屏的，以及如何使 oneButtonRow 类与 TwoButtonRow 具有相同的宽度，因为它们的宽度不同。我目前的技术是否可行并且会在其他屏幕上响应？

附上图片和代码谢谢:)

电流输出图像

  render() {
    return (
      <ImageBackground
        source={require('../assets/images/HomeBackground.png')}
        style={styles.ImageBackground}>

        <View style={styles.container}>
          <View style={styles.upperArea}>
          </View>
          <View style={styles.TwoButtonRow}>
            <Button buttonStyle={styles.inlineButton} title="Log In"
            linearGradientProps={{colors: ['#f4c26a', '#fba083','#f4c26a'],
                start: [1, 0], end: [0, 0.5]}}/>
            <View style={{width:15}}></View>
            <Button buttonStyle={styles.inlineButton} title="Register"
            linearGradientProps={{colors: ['#f4c26a', '#fba083','#f4c26a'],
                start: [1, 0], end: [0, 0.5]}}/>
          </View>
          <View style={styles.OneButtonRow}>
            <Button buttonStyle={styles.inlineButton} title="Continue with Facebook"
            icon={<Icon name='facebook' size={25} color='white'/>}
            linearGradientProps={{colors: ['#3b5998', '#2b4170'],
            start: [1, 0], end: [0, 0.5]}}/>
          </View>
          <View style={styles.OneButtonRow}>
            <Button buttonStyle={styles.inlineButton} title="Continue with G-mail"
            icon={<Icon name='google' size={25} color='white'/>}
            linearGradientProps={{colors: ['#e64522', '#c33219'],
            start: [1, 0], end: [0, 0.5]}}/>
          </View>
        </View>

      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  ImageBackground : {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width:'100%',
    height:'100%',
    resizeMode:'stretch'
  },
    container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex:1,
    },
  upperArea:{
    flex:0.4
  },
  TwoButtonRow :{
    flexDirection:'row',
    flex:0.1,
    backgroundColor: 'blue',
  },
  OneButtonRow: {
    flex:0.1,
    backgroundColor: 'blue',
    flexDirection:'row',

  },
    inlineButton : {
     width:'100%',
     height:40,
     borderRadius:30
    }
});

标签： cssreact-nativeflexbox