【问题标题】: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 中创建内部弯曲设计,请帮助我
    【解决方案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 中使用了你的代码,但是出现了错误
    猜你喜欢
    • 1970-01-01
    • 2020-01-22
    • 1970-01-01
    • 2017-02-13
    • 2020-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-28
    相关资源
    最近更新 更多