<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