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>

    )
  }
}

这是它在我的模拟器中的样子

看起来弹性盒子在旋转之前对组件进行了布局，然后旋转了 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>

编辑（解释）：

弹性盒基本上是一个区域。在这个区域中，所有的 Subarea 都会根据它们的 flex 属性占用一些空间。

如果你有一个 flex 属性设置为 1 的 3 子区域，则 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> 是一个 flex 设置为 1 的 flexbox，您的 <Text> 和 <Slider> 也不是灵活的组件，因此没有什么说它们必须占用 1/3 (每个）的总空间。通过将它们包装在 View style={{flex: 1}}> 中，我们只是设置了这个和 ta-da