モバイル画面でmaxWidthを設定する方法は？

Question

私は一列にいくつかのボタンをレンダリングしようとしていますが、CSSスタイルに問題があります。どのように私はモバイル画面でmaxwidthを設定できますか？これは私の問題の画面が短いです

maxwidthが超えてからボタンの残りが自動的に新しい行に表示されたら、CSSスタイルを設定したいのですが、反応ネイティブでレンダリングすることは可能ですか？ 私のソースコードは::

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; 

Answer 1

あなたが追加することができます：flexWrap: 'wrap'を私たちが代わりに生成されたリアクトコードの結果のHTMLを見ることができれば、それは非常に役立つだろう（<View style={{flexDirection: 'row'}}>）

More about flex