Question

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

附带的图像和代码谢谢：）

Image of current output

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

显示弹性宽度时出现问题

0 个答案: