react-native line组件

Posted on

在RN里是没有

标签的 所以我想写分割线的时候 一开始想用块本身的border 但是现在的需求是带字的分割线 就是字然后面上带线 如图

image-20200426150912958

所以就想写一个组件 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  View,
  Dimensions                   
} from 'react-native';         

export default class Line extends Component {
  static propTypes = {         
    height: PropTypes.number,  
    paddingLeft: PropTypes.number,  
    paddingRight: PropTypes.number, 
    backgroundColor: PropTypes.string,
    lineColor: PropTypes.string,    
    width: PropTypes.number    
  }   
      
  static defaultProps = {      
    height: 0.5,               
    paddingLeft: 0,
    paddingRight: 0,           
    backgroundColor: '#FFFFFF',
    lineColor: '#eef0f5',      
    width: 1
  }
  
  constructor(props) {         
    super(props);              
  }
  
  render() {
    let screenWidth= Dimensions.get('window').width; 
    return (
      <View style={{backgroundColor: this.props.backgroundColor, height: this.props.height, paddingLeft: this.props.paddingLeft, paddingRight: this.props.paddingRight, width: this.props.width
        <View style={{flex: 1, backgroundColor: this.props.lineColor}} />
      </View>
    );
  }
}
1
2
3
4
5
import Line from "../components/Line"
<View style={styles.flexRow}>
  <Text style={styles.middleTitle}>工作地点</Text>
  <Line height={1} paddingLeft={15} width={0.65}/>
</View>

注意： 这个里面有个巨坑 就是在里面的text不可加margin 尤其是top&bottom 否则线永远不会跟文字居中