Реакция собственных трансформаций вращения - PullRequest
Новая
       30

Реакция собственных трансформаций вращения

0 голосов
/ 29 сентября 2018

Я хочу сделать слайдер вертикальным на ios.У меня есть компонент, который выглядит следующим образом, текстовые метки только для визуализации 

export class VerticalSlider extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello</Text>
        <Slider
          maximumValue={100}
          minimumValue={0}
          value={50}
          minimumTrackTintColor="black"
          style={{
            transform: [{ rotate: '90deg' }]
          }}
        />
        <Text>Hello</Text>
      </View>

    )
  }
}

Вот как это выглядит в моем симуляторе

enter image description here

Похоже, что flex box раскладывает компоненты перед поворотом, затем поворачивается на 90 градусов и накладывается на текстовые метки выше и ниже.Я ожидаю, что верхняя часть ползунка будет внизу первой метки, а вторая метка будет сдвинута вниз.

Есть ли что-то, что я могу сделать, чтобы это исправить?

Вотмои версии: 

"dependencies": {
    "expo": "^29.0.0",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz"
  }

1 Ответ

0 голосов
/ 30 сентября 2018

Если я правильно понимаю, вы хотите что-то вроде этого, верно (не обращайте внимания на заголовок и крестик)?

(https://i.stack.imgur.com/AIVjm.jpg)

Если это то, что выхочу, вам просто нужно обернуть ваши компоненты в виде сгибанием: 

<View style={{flex: 1}}>
    <View style={{flex: 1}}>
        <Text>Hello</Text>
    </View>
    <View style={{flex: 1}}>
        <Slider
            maximumValue={100}
            minimumValue={0}
            value={50}
            minimumTrackTintColor="black"
            style={{transform: [{rotate: '90deg'}]}} />
    </View>
    <View style={{flex: 1}}>
        <Text>Hello</Text>
    </View>
</View>

Редактировать (пояснение):

Флексбокс - это, в основном, область.В этой области весь Подрайон займет некоторое пространство в соответствии со свойством flex.

Если у вас есть 3 подзоны, где свойство flex установлено в 1, то 3 займет пробел:

[1 | 2 | 3]

Если у вас есть 3 подзоны, где свойство flex установлено в 1, 1 и 2, общая площадь будет иметь размер 4 flex:

[1 | 2 | 3 3]

Я не знаю, понятна ли она, но вы можете проверить эту ссылку. С React Native в основном то же самое, за исключением того, что вам не нужноотобразить свой вид как Flex:)

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

В вашем коде дажеесли ваш <View> это flexbox с flex, установленным в 1, ваши <Text> и <Slider> не являются гибкими компонентами, поэтому нет ничего, что говорит о том, что они должны занимать 1/3 (каждого) от общего пространства.Оборачивая их в View style={{flex: 1}}>, мы просто устанавливаем это и та-да

...