如何在 React-Native 中编写这个 css 代码答案

【问题标题】：How to write this css code in React-Native如何在 React-Native 中编写这个 css 代码
【发布时间】：2018-07-28 04:46:04
【问题描述】：

何在 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 ;
}

【问题讨论】：

标签： css react-native

【解决方案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,
    }
});

更新：随着 OP 更新问题，答案也随之更新。这里有一个示例演示 https://codesandbox.io/s/61qxm7mqo3

【讨论】：

是的，我知道 react-native 中没有 div，但你给定的 css 代码并没有像我给出的那样设计
我想制作类似这样的内部弯曲访问上面的链接。stackoverflow.com/questions/43623777/…
@HunnainPasha 您的问题没有涉及任何设计。您询问了伪元素和边界半径。我希望我的回答中涵盖了这一点
Aravind 请帮助我，我想在 react-native 中创建内部弯曲设计，请帮助我
@HunnainPasha 查看此链接codedaily.io/tutorials/22/The-Shapes-of-React-Native

【解决方案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>
    );
}

【讨论】：

嗨 Munkh，我已经安装了样式包并在 react-native 中使用了你的代码，但是出现了错误