React Native 技巧集锦

来源：互联网发布：国家打击网络棋牌吗? 编辑：程序博客网时间：2024/06/05 05:40

1、利用View绘制上、下三角

<View style={{  width:0,    height:0,    borderTopWidth:12,    borderRightWidth:12, borderBottomWidth:0,    borderLeftColor:'transparent',    borderTopColor:'#656565',    borderRightColor:'transparent',                 borderBottomColor:'transparent',    marginLeft:70}}></View>

这里写图片描述

2、利用View绘制左、右箭头

backIcon: {    width: 14,    height: 14,    borderColor: '#777',    borderLeftWidth: 2,    borderBottomWidth: 2,    transform: [{rotate: '45deg'}],    backgroundColor: 'transparent',    position: 'absolute',    top: 33.9,    left: 14.5  }

3、propTypes类型列举：

propTypes: {// 可以声明 prop 为指定的 JS 基本类型。optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定形状参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color:    React.PropTypes.string,   fontSize: React.PropTypes.number }), // 以后任意类型加上 `isRequired` 来使 prop 不可空。requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired,}

4、查找节点元素

// 处理偏移问题  scrollViewTo(e) {    let target = e.nativeEvent.target;    let scrollLength;      switch (target){         case ReactNative.findNodeHandle(this.refs.email):           scrollLength = this.sw < 340 ? 60 : 0;           break         default:         break;     }       }

阅读全文

1 0