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

相關文章
相關標籤/搜索