Question

我试图连续渲染几个按钮，但是css样式有些问题。如何在手机屏幕中设置maxwidth？这是我的问题

的屏幕

我想在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;

Answer 1

您可以在视图中添加flexWrap: 'wrap' <View style={{flexDirection: 'row'}}>）

More about flex

如何在手机屏幕中设置maxWidth？

1 个答案: