最近做一个需求,需求里需要实现一个类似Picker组件的效果,如下图所示,页面布局很简单,上面一个View 包含两个Text或者Touch*组件,下面放置一个Picker组件。
这个组件在app中已经存在,本来打算直接桥接native的,觉得这样基础的组件,还是使用RN的吧,这样就开始了我的Picker刨根之路。
布局代码如下:
<Animated.View style={[styles.tip , {transform: [{
translateY: this.state.offset.interpolate({
inputRange: [0, 1],
outputRange: [height, (height-aHeight)]
}),
}]
}]}>
<View style={styles.tipTitleView} >
<Text style={styles.cancelText} onPress={this.cancel.bind(this)}>取消</Text>
<Text style={styles.okText} onPress={this.ok.bind(this)} >确定</Text>
</View>
<Picker
style={styles.picker}
mode={Picker.MODE_DIALOG}
itemStyle={styles.itempicker}
selectedValue={this.state.choice}
onValueChange={choice => this.setState({choice: choice})}>
{this.options.map((aOption) => <Picker.Item color='#b5b9be' label={aOption} value={aOption} key={aOption} /> )}
</Picker>
</Animated.View>
那么问题来了,当我给Picker的style属性设置height为161的时候,发现Picker的高度确实是161,背景色为green,但是滚动轮的height确不是161,如下图所示:
在上面的一个View部分,还是可以点击Picker的item选项,当我点击取消和确定的时候