比如处理onPress
,如何绑定上下文环境。
[推荐]方法一:使用类的属性
class Demo extends Component {
handlePress=()=>{Modal.alert('onPress')}
render() {
return (
<View style={styles.container}>
<Button onPress={this.handlePress} >press me</Button>
</View>
);
}
}
方法二:使用Function.prototype.bind
class Demo extends Component {
handlePress() {Modal.alert('onPress')}
render() {
return (
<View style={styles.container}>
<Button onPress={this.handlePress.bind(this)} >press me</Button>
</View>
);
}
}
方法三:使用在构造函数定义的函数
class Demo extends Component {
constructor(props) {
super(props);
this.handlePress = this.handlePress.bind(this);
}
handlePress() {Modal.alert('onPress')}
render() {
return (
<View style={styles.container}>
<Button onPress={this.handlePress} >press me</Button>
</View>
);
}
}
是,目前仅仅支持flex属性。
目前由于兼容性问题,在Android下只有该组件失去焦点的时候才会触发,后续会保证三端统一。
目前由于兼容性问题,1rem会被解析成2px
由于display只支持flex,不能使用display: none达到隐藏View效果。在QAP下,可以使用下面类似的代码达到目的:
class Demo extends Component {
renderName() {
if (false) {
return (<Text>我不会出现</Text>)
}
}
render() {
return (
<View style={styles.container}>
{this.renderName()}
</View>
);
}
}
该组件暂时没有视觉效果,后续会开放出来
由于不点击debugger时,使用的是移动端的JS引擎,点击debugger后,使用的是PC浏览器的引擎。由于两端的引擎有差异性,通常来说PC的JS引擎健壮性比移动端的要好,因此造成调试模式下可以运行,非调试模式下无法运行的问题。目前QAP已经尽可能的通过polyfill抹平端的差异性,但还是会面临该问题。下面列举下可能导致差异性的问题
1.自己编写的代码中有语法错误。 2.使用了不支持的属性、方法或者语法。
刷新浏览器即可
使用千牛扫码调试,点击inspect即可查看日志