react-native page 样式

Posted on

RN中有很多在css踩的坑 在这个blog中记录一下

样式如果报了语法错误 改了之后log中没有报错 但是模拟机还是报错的话 就重新运行一下

参考：https://reactnative.cn/docs/layout-props/

  1. 在 React-Native中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位

  2. 在react-native中是没有css文件的 他的css 是由js方法加载出来的

    css 里用 , 隔开每一个样式 不用 ;

  3. image 加载

    1
    <Image source={{uri: job.company.logo.url}} style={Styles.itemImage} />

  4. padding 后面只跟一个值 四个面都是一样的 不可两个值或者四个值 字符串也不行

    • 如果想同时设置上下 paddingVertical 同时设置左右 paddingHorizontal

    • margin-top 要写成 marginTop 每一个用-的css的样式 都去掉-第二个词的首字母换成大写

    • margin: auto没有 要换成 alignItems:’center’

  5. 默认图片

    1
    2
    3
    4
    5
    {
        job.company.logo.url ? ( 
           <Image source={{uri: job.company.logo.url}} style={styles.itemImage} /> ):( 
           <Image source={{uri: "https://photo.wondercv.com/uploads/company/logo/231886/1514627b-17fd-4156-84c6-75ca07c18c71"}} style={styles.itemImage} />) 
    }

  6. rn中没有fixed定位，更没有100%宽高；
    我们可以Dimensions以及flex布局进行居中设置

    1
    2
    3
    4
    5
    6
    7
    8
    var screenWidth = Dimensions.get('window').width;
    var screenHeight= Dimensions.get('window').height;
     container: {
        alignItems:'center',
        justifyContent:'center',
        marginBottom: 34,
        width: screenWidth
     }

  1. value值需要用引号包起来

    flexDirection: ‘row’

    backgroundColor: “#fff”

  2. rn元素的绝对定位和相对定位不需要父元素设置position，且没有zIndex配置

  3. 使用safeAreaView的时候 注意要加上style flex: 1

  4. React Native中position只有absolute和relative两个值；并没有fixed值。

    页面用的是ScrollView。我们只需要将这个置底悬浮按钮写在ScrollView外部就好

  5. Applying borderRadius to ignores backgroundColor

    image-20200426164150979

    overflow=”hidden”