边界半径溢出在 react-native 中无法正常工作答案

【问题标题】：Overflow with border-radius does not work correctly in react-native边界半径溢出在 react-native 中无法正常工作
【发布时间】：2021-07-29 07:37:30
【问题描述】：

我已经实现了以下但overflow: hidden 不起作用。 border-radius 应该是一堵墙。

const App = () => {
  return (
    <View style={styles.container} >
      <View style={styles.itemContainer}>
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
      </View>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    position: "absolute", top: 200, right: 20, width: 200, height: 200, borderColor: "red", borderWidth: 1, backgroundColor: "#ff0", borderBottomEndRadius: 200
  },
  itemContainer: {
    flexDirection: "row", flexWrap: "wrap", overflow: "hidden"
  },
  item: {
    width: 30, height: 30, borderRadius: 15, backgroundColor: "#000", margin: 10,
  },
});

圆圈不应超出边界半径。我该怎么做？

任何帮助将不胜感激。

【问题讨论】：

标签： react-native react-native-stylesheet

【解决方案1】：

您需要更改container 样式和itemContainer。

    const App = () => {
      return (
        <View style={styles.container} >
          <View style={styles.itemContainer}>
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
          </View>
        </View>
      );
    };
    
    

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemContainer: {
    position: 'absolute',
    top: 200,
    right: 20,
    width: 200,
    height: 200,
    borderColor: 'red',
    borderWidth: 1,
    backgroundColor: '#ff0',
    borderBottomEndRadius: 200,
    flexDirection: 'row',
    flexWrap: 'wrap',
    overflow: 'hidden',
  },
  item: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#000',
    margin: 10,
  },
});

【讨论】：