React 本机旋转转换破坏了弹性框布局

Question

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

    )
  }
}

这是我的模拟器中的样子

看起来 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"
  }

Answer 1

如果我没理解错的话，你想要这样的东西对吧（不要注意标题和叉号）？

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

如果这是你想要的，你只需要用 flex 将你的组件包装在一个视图中：

<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>

编辑（解释）：

Flexbox 基本上就是一个区域。在这个区域，所有的Subarea都会根据自己的弹性space占用一些space。

如果你有一个 3 子区域，其中 flex 属性设置为 1，则 3 将占用 space space:

[ 1 | 2 | 3]

如果您有一个 3 子区域，其中 flex 属性设置为 1、1 和 2，则总区域的大小为 4 flex:

[ 1 | 2 | 3 3 ]

不知道说清楚了没，大家可以看看这个link。它与 React Native 基本相同，除了你不需要将你的视图显示为 Flex :)

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

在你的代码中，即使你的 <View> 是一个 flex 设置为 1 的 flexbox，你的 <Text> 和 <Slider> 也不是灵活的组件，所以没有什么可说的他们必须拿走总数的 1/3（每个）space。通过将它们包装在 View style={{flex: 1}}> 中，我们只是设置它和 ta-da

React 本机旋转转换破坏了弹性框布局

React native rotation transformations break flex box layout

react-native

react-native-flexbox

react-native-ios