React native 反应本机旋转变换打断曲轴箱布局

我想在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将组件包装到视图中即可：

<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基本上是一个区域。在这个区域中，所有子区域将根据其flex属性占用一些空间

如果flex属性设置为1的子区域为3，则3将占用空间：

[1 | 2 | 3]

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

[1 | 2 | 3]

我不知道是否清楚，但你可以查看这个链接。它与React Native基本相同，只是不需要将视图显示为Flex:）

---

在您的代码中，即使您的

是一个flexbox，flex设置为1，您的

和

也不是灵活的组件，因此没有任何说明它们必须占用总空间的1/3（每个）。通过将它们包装在一个

视图样式={{flex:1}}}>

中，我们只是设置了这个，ta-da也很好，你能解释一下是怎么回事吗，我还在摸索flexboxI我刚刚添加了一些解释，我的英语不是很好，但我希望它能有所帮助！

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