如何在手機屏幕上設置maxWidth？

我想在一行中呈現幾個按鈕，但有一些CSS樣式的問題。我如何設置手機屏幕的最大寬度？這是屏幕短缺我的問題如何在手機屏幕上設置maxWidth？

我想設置一個CSS樣式時，最大寬度結束，然後其餘的按鈕都顯示在一個新的行自動是它可能呈現在react-native？我的源代碼::

import React from 'react'; 
    import { View, Text, StyleSheet, TouchableHighlight } from 'react-native'; 
    import { Header, Icon } from 'react-native-elements'; 


    class Extras extends React.Component { 

    constructor(props){ 
    super(props); 
    this.state = { selectFurnish: '', selectVeg: '', selectOtherFecility: '' }; 
    this.onButtonPress = this.onButtonPress.bind(this); 
    } 

    leftComponent =() => { 
    return <Icon name='angle-left' color='#fff' type='font-awesome' onPress={() => {this.props.navigation.navigate('pricing')}} /> 
    } 

    onButtonPress = (stateName, selected) =>{ 
    const obj = Object.assign({},this.state); 
    obj[stateName] = selected; 
    this.setState(obj); 
    } 

    render() { 
    const furnish_button_props = [ 
     { id: 0, value: 'Full'}, 
     { id: 1, value: 'Semi'}, 
     { id: 2, value: 'None'} 
    ]; 
    const veg_button_props = [ 
     { id: 0, value: 'Yes'}, 
     { id: 1, value: 'No'} 
    ]; 
    const otherFacilities_button_props = [ 
     { id: 0, value: 'Parking'}, 
     { id: 1, value: 'Lift'}, 
     { id: 2, value: 'Gas Pipeline'}, 
     { id: 3, value: 'Pool'} 
    ]; 
    return(
     <View style={styles.container}> 
     <Header 
      leftComponent={this.leftComponent()} 
      centerComponent={{text: 'NEW LISTING', style: {color: '#FFF', fontSize: 16}}} 
      outerContainerStyles={{backgroundColor: '#3498db'}} 
     /> 
     <View style={styles.block}> 
      <View> 
      <Text style={styles.textType}>Furnishing</Text> 
      <View style={{flexDirection: 'row'}}> 
       {furnish_button_props.map(i => { 
       return(
        <TouchableHighlight 
        activeOpacity={1} 
        onPress={() => this.onButtonPress('selectFurnish',i.value)} 
        key={i.id} 
        style={ this.state.selectFurnish === i.value ? styles.buttonOnPress : styles.button } 
        > 
        <Text style={ this.state.selectFurnish === i.value ? styles.textOnPress : styles.text }>{i.value}</Text> 
        </TouchableHighlight> 
       ) 
       })} 
      </View> 
      </View> 
      <View style={{marginTop: 50}}> 
      <Text style={styles.textType}>Vegetarian</Text> 
      <View style={{flexDirection: 'row'}}> 
       {veg_button_props.map(i => { 
       return(
        <TouchableHighlight 
        activeOpacity={1} 
        onPress={() => this.onButtonPress('selectVeg', i.value)} 
        key={i.id} 
        style={ this.state.selectVeg === i.value ? styles.buttonOnPress : styles.button } 
        > 
        <Text style={ this.state.selectVeg === i.value ? styles.textOnPress : styles.text }>{i.value}</Text> 
        </TouchableHighlight> 
       ) 
       })} 
      </View> 
      </View> 
      <View style={{marginTop: 50}}> 
      <Text style={styles.textType}>Other Facilities</Text> 
      <View style={{flexDirection: 'row'}}> 
       {otherFacilities_button_props.map(i => { 
       return(
        <TouchableHighlight 
        activeOpacity={1} 
        onPress={() => this.onButtonPress('selectOtherFecility', i.value)} 
        key={i.id} 
        style={ this.state.selectOtherFecility === i.value ? styles.buttonOnPress : styles.button } 
        > 
        <Text style={ this.state.selectOtherFecility === i.value ? styles.textOnPress : styles.text }>{i.value}</Text> 
        </TouchableHighlight> 
       ) 
       })} 
      </View> 
      </View> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    maxWidth: '100%' 
    }, 
    block: { 
    marginTop: 120, 
    marginLeft: 10 
    }, 
    textType: { 
    fontSize: 16, 
    fontWeight: 'bold', 
    marginBottom: 5, 
    marginLeft: 5 
    }, 
    button: { 
    borderColor: '#3498db', 
    borderWidth: 1, 
    borderRadius: 25, 
    width: 100, 
    height: 50, 
    marginLeft: 5, 
    marginRight: 5, 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center' 
    }, 
    buttonOnPress: { 
    borderColor: '#3498db', 
    backgroundColor: '#3498db', 
    borderWidth: 1, 
    borderRadius: 25, 
    width: 100, 
    height: 35, 
    marginLeft: 5, 
    marginRight: 5 
    }, 
    text: { 
    fontSize: 14, 
    color: '#3498db' 
    }, 
    textOnPress: { 
    fontSize: 14, 
    fontWeight: 'bold', 
    color: '#ffffff' 
    }, 
}); 

export default Extras;

來源

2017-08-01 Avijit Dutta

這將幫助極大，如果我們可以看到生成的HTML而不是生成的代碼做出反應它。 – Blazemonger

在寬度上嘗試設置視口縮放比例。示例寬度：100vw（這將只顯示正在呈現頁面的設備的最大屏幕大小）。 –

如何檢查HTML可以告訴我！因爲我是反應本地新... –