Минимальная ширина/высота в React Native

Ответ 1

Свойства minHeight, maxHeight, minWidth и maxWidth поддерживаются в версии с естественной реакцией 0,29,0 для iOS и Android.

Ниже приведено описание maxHeight из исходной документации. Это описание также относится к другим свойствам стиля min/max.

maxHeight - максимальная высота для этого компонента, в логические пиксели.

Он работает аналогично max-height в CSS, но в React Native вы должны используйте баллы или проценты. Ems и другие устройства не поддерживаются.

See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details.

Дурацкий пример:

<View
  style={{
    minWidth: '20%',
    maxWidth: 500,
    minHeight: '10%',
    maxHeight: 150,
  }}
/>

Ответ 2

Я смог найти решение для вас. Вот рабочая демка... https://rnplay.org/apps/vaD1iA

И вот ключевые части.

Сначала вы увеличиваете размеры устройства...

var Dimensions = require('Dimensions');
var {
  width,
  height
} = Dimensions.get('window');

Здесь компонент кнопки, который использует ширину устройства в качестве основы для кнопки с

const Button = React.createClass({
  render(){
    return(
      <TouchableHighlight>
        <Text style={[styles.button,{width: width - 20}]}>
          {this.props.children}
        </Text>
      </TouchableHighlight>
    )
  }
});

Тогда, как вы можете видеть здесь, ширина кнопки будет одинаковой независимо от ширины содержимого ярлыка.

Ответ 3

Этот ответ устарел, используйте ответ halilb.

Я решил это, используя опору onLayout, это очень просто:

constructor(){
  super(props);
  this.state={curImgHeight:0}
}

render(){
  <Image
    source={{uri: "https://placehold.it/350x150"}}
    resizeMode='cover'

    style={[styles.image, {height:(this.state.curImgHeight<=0?null:this.state.curImgHeight)}]}

    onLayout={(e)=>{
      let {height} = e.nativeEvent.layout;
      let minimumImgHeight = 400; //We set the minimum height we want here.
      if(height<= minimumImgHeight){ //Whenever the real height of the image is less than the minimum height
        this.setState({curImgHeight:minimumImgHeight}); //just change the curImgHeight state property to the minimum height.
      }
    }}
  />
}