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

Как установить минимальную ширину или высоту для компонента React Native?

В css я могу использовать min-width/min-height

https://facebook.github.io/react-native/docs/flexbox.html#content

Не существует minWidth/minHeight для интерактивных документов

Ответы

Ответ 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>
    )
  }
});

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

enter image description here

Ответ 3

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

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

Пример:

Шаг 1: Я создаю в нашем состоянии опору, которая будет содержать текущую высоту изображения с именем curImgHeight.

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

Шаг 2: Используйте опору в любом View или Element, который поддерживает опору onLayout.

Здесь я использую его с Image. Затем все, что нам нужно сделать, это изменить это свойство состояния, если фактическая высота изображения меньше нашей минимальной высоты.

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.
      }
    }}
  />
}

Вот как я решил это для меня.

ps: во время поиска я обнаружил, что реактивная версия неофициально поддерживает minHeight и maxHeight, но только для iOS, а не для Android. Я бы не посмел их использовать. Приведенный выше код работает хорошо и дает мне контроль.

Ответ 4

Вы можете сделать что-то подобное:

_getButtonStyle() {
  var style = {height:36,padding:8}

  if(this.props.buttonText.length < 4){
    style.width = 64
  }
  return style
}

Ответ 5

Вы можете использовать minHeight или flexBasis - это похоже.