刚刚开始接触RN, 拥抱大前端的变化, 之前其实连JS都不会写.
记录的东西可能没有什么逻辑性, 仅仅是为了记录一下自己的学习.
1. 封装可点击组件
之前写OC的时候, 可点击的控件像UIButton这样的, 内部自带一个Image和一个Label, 也就是这两个部分都带有可点击的属性.
但是在RN提供的Button只是一个单纯的点击组件, 显示的是文本.
想要像OC这样的同时又多个组件放在一起可以点击的话, 需要用TouchableHighlight这样的组件进行封装.
一共有三个TouchableHighlight,TouchableNativeFeedback,TouchableOpacity.
其中第二个文档介绍是只限于安卓平台, 第一个在点击的时候, 整体的背景会变黑, 不推荐, 推荐用第三个.
NOTE: 在封装时候, 如果里面的组件超过了一个, 那么最外层是要用一个<View>进行包裹的.
<TouchableOpacity onPress={this._onPressButton}>
<View style={styles.container}>
<Image ref = 'leftimage'
style={styles.image}
source={backImage}/>
<Text style={styles.text}>{this.props.textString}</Text>
</View>
</TouchableOpacity>
2. 使用自定义函数的时候需要进行函数绑定
这个应该是写JS的人的基本认知.
原先没有接触过, 觉得很不可思议, 在触发某个自定义方法的时候, 发现报错说this.xxx is not a function.
image.png
代码如下:
changeNextButtonState(newState){
console.log('关于传递来的状态' + newState)
this.setState({
onClick:newState
});
console.log('赋值之后的状态'+this.state.onClick)
}
查阅资料之后基于ES6特性将代码进行了更改, 如下:
changeNextButtonState = (newState) => {
console.log('关于传递来的状态' + newState)
this.setState({
onClick:newState
});
console.log('赋值之后的状态'+this.state.onClick)
}
在ES5的时代, RN类的创建是用React.createClass来做的, 那么在这个方法里, 他已经帮你把所有的方法都去bind一遍, 那么在所有的方法里面都可以在任意的地方去做回调函数, 而this是不会有变化.
在ES6中, 有两种选择, 一种是在构造函数中去自己手写bind, 另外一种就是像我上面那样, 使用尽头函数, 会绑定当前scope的this引用.
3. 关于ListView设置高度的无效的问题
在写ListView的时候给他设置了高度, 但是发现无效, 于是在模拟器里面打开inspector来看, 如下图.
当时就觉得这是明明白白的在无赖, 我都设置了200, 你还要显示535.5, 那我设置还有什么意义.
后面Google了一下, 在SOF上面发现了为什么.
需要用一个View来包裹ListView, 通过设置View的高度来间接限制ListView的高度.
<View style={{height: 200}}>
<ListView .../>
</View>
链接:
Set height of ListView in React Native
以及RN官方文档对此的解释.
Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height.
网友评论