3

我想在 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"
  }
4

1 回答 1

3

如果我理解正确，你想要这样的东西，对吧（不要注意标题和十字架）？

（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 都会根据它们的 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（每个）。通过将它们包装在 aView style={{flex: 1}}>我们只是设置这个和 ta-da

于 2018-09-30T12:35:44.137 回答