<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