Question

何以用React-Native编写此CSS代码，因为我不知道如何在react native和marginRadius中编写:before和:after，并给出给定的四个值错误，请帮助我

div {
  width:500px;
  height:200px;
  background:red;
  position:relative;
  overflow:hidden;
}
div:after, 
div:before {
  content:'';
  background:white;
  position:absolute;
  top:-10px;
  left:0;
  width:100%;
  height:20px;
  border-radius:0 0 50% 50%;
}
div:after {
  top:auto;
  bottom:-10px;
  border-radius:50% 50% 0 0 ;
}

Answer 1

首先，React Native中没有div概念。现在，React Native中不支持伪类元素。阅读here。要应用borderRadius属性，请尝试以下给出的代码。

<View style={styles.container}></View>

const styles = StyleSheet.create({
    container: {
        width: 500,
        height: 200,
        backgroundColor: 'red',
        position: 'relative',
        overflow: 'hidden',
        zIndex: 100,
        borderBottomLeftRadius: 100,
        borderBottomRightRadius: 100,
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
    }
});

更新：随着操作人员更新了问题，答案也随之更新。此处为示例演示https://codesandbox.io/s/61qxm7mqo3

Answer 2

您可以按以下方式使用此软件包styled-component

const Container = styled.div`
  width: 500px;
  height: 200px;
  background: red;
  position: relative;
  overflow: hidden;

    &:after, before 
      content: '';
      background: white;
      position: absolute;
      top: -10px;
      left: 0;
      width: 100%;
      height: 20px;
      border-radius: 0 0 50% 50%;

`

然后将其用作组件

render() {
    return (
        <Container>
            // Other components
        </Container>
    );
}

如何在React-Native中编写此CSS代码

2 个答案: