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圖片自適應居中

寬度等於屏幕寬度,高度按比例計算

2輸入框和按鈕居中

設置好左右間距,寬度自適應


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM