如何调整图像和页面大小以适应所有Android屏幕反应原生

时间:2017-06-11 08:10:40

标签: javascript android react-native

问题试图让图片适合某些文字,就像屏幕的2/3这里是图片的链接http://imgur.com/tuJPGqT

布局设计为

<View style={styles.container} maintainAspectRatio={true} source={logotwo}>

        <Container >  <Image source={logo} maintainAspectRatio={true} style={styles.logo}>
        </Image>
          <View >
            <Content >

              <Text style={styles.boldtext}>SOME TITLE</Text>
              <Text style={styles.subtext} adjustsFontSizeToFit={true} numberOfLines={3}>
                A str agfdgdfgfdgfsdgsfdggdgfg(some long sentence) nance.</Text>
              <View>
                <Button style={styles.button}
                  onPress={() => { this._signIn() } }>
                  <Text style={{ fontSize: 20, color: '#fff' }}>
                    LOGIN 
            </Text>
                </Button>
              </View>
            </Content>
          </View>

        </Container >
      </View>

和相同的风格是

  container: {
     resizeMode: 'cover', height: null,
    backgroundColor: '#ffffff',
  },

  logo: {
    width: null,
    height: 398,
resizeMode: 'stretch',
  },
 boldtext: {

    textAlign: 'center',
    fontSize: 23,
    fontWeight: 'bold',
  }
  ,
  subtext: {
    marginLeft: 10,
    marginRight: 10,
    opacity: 0.7,
    textAlign: 'center',

  },
button: {
    marginTop: 20,
    alignSelf: 'stretch',
    height: 70,
    fontSize: 50,
  }

我尝试手动调整宽度和高度,但分辨率与我测试的各种屏幕不匹配。

请为我的应用中的所有屏幕建议一些好的标准。

0 个答案:

没有答案