React Native旋转变换破坏了Flexbox布局。

Question

React Native旋转变换破坏了Flexbox布局。

react-nativereact-native-iosreact-native-flexbox

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>

    )
  }
}

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

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

- Luke De Feo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TBouder · Accepted Answer

如果我理解正确，你想要类似于这样的东西，对吗（不用关注标题和十字）？

（https://istack.dev59.com/AIVjm.webp）

如果是这样，你只需要在一个具有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，那么这三个子区域将占据相同的空间：

[ 1 | 2 | 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}}>中，我们只是设置了这个属性，然后就完成了。