react native布局(图片自适应,居中)

<ScrollView style={[this.state.showLogin]}> 
            <View style={[{marginBottom:10,}]}>
              <Image style={[styles.image]} source={require('./image/banner.png')}></Image>
            </View> 
            <View style={[styles.inputRow,styles.center]}> 
                <Text style={styles.text}>企业号</Text> 
                <TextInput style={styles.input} placeholder="请输入企业号" onChangeText={this._getEmail}/> 
            </View>

            <View style={[styles.inputRow,styles.center]}>
              <Text style={styles.text}>我的账号</Text><TextInput style={styles.input} placeholder="请输入我的账号" onChangeText={this._getEmail}/>
            </View>
            <View style={[styles.inputRow,styles.center]}>
              <Text style={styles.text}>登陆密码</Text><TextInput style={styles.input} placeholder="请输入登陆密码" password={true} onChangeText={this._getPassword}/>
            </View>

            <View>
              <TouchableHighlight underlayColor="#38adff"  onPress={this._login}>
                <View style={[styles.btn,styles.center]}>
                <Text style={{color:'#fff'}}>登陆</Text>
                </View>
              </TouchableHighlight>
            </View> 
        </ScrollView>
var styles = StyleSheet.create({  
  center:{
    alignItems:'center',
    justifyContent: 'center',
  },
  image:{
    width:width, 
    height:498*width/750, 
  },
  inputRow:{ 
    flexDirection:'row',     
    marginBottom:10, 
    marginLeft:40,
    marginRight:40,   
    borderWidth:Util.pixel,
    borderColor:'transparent',
    borderBottomColor:'#ccc'
  }, 
  text:{ 
    width:60,
    textAlign:'left'
  },
  input:{  
    flex:1,
    marginLeft:10, 
    alignItems:'flex-start',
    height:35,
    fontSize:13  
  },
  btn:{     
    height:35, 
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: '#38adff',
    borderRadius: 4,
    marginTop:10,
    marginLeft:40,
    marginRight:40
  }
});
var Dimensions = require('Dimensions');
var { width, height } = Dimensions.get('window');

1图片自适应居中flex

宽度等于屏幕宽度,高度按比例计算ui

2输入框和按钮居中this

设置好左右间距,宽度自适应spa

相关文章
相关标签/搜索