child 视图覆盖了 parent 视图的边界。 [react-native]

Question

我正在尝试按照 react-native 中的说明进行操作。我在 parent 视图中设置了 borderRadius。但是 child 覆盖了它。所以在最终视图中，borderRadius是不可见的

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1, borderRadius:30, backgroundColor:'red'}}>
        <View style={{flexGrow: 10, backgroundColor: 'powderblue'}} />
        <View style={{flexGrow: 20, backgroundColor: 'skyblue'}} />
        <View style={{flexGrow: 30, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

有什么我想补充的吗？

Answer 1

将 overflow: "hidden" 添加到您的父级样式

child 视图覆盖了 parent 视图的边界。 [react-native]

child views are overriding parent view's boundary. [react-native]

javascript

reactjs

react-native

react-native-android

react-native-ios