《React-Native系列》41、刨根问底Picker组件

最新推荐文章于 2024-08-12 08:32:50 发布

coder_小刀

最新推荐文章于 2024-08-12 08:32:50 发布

阅读量8.3k

点赞数 3

分类专栏： ReactNative ReactNative实战系列文章标签： ReactNative Picker

本文链接：https://blog.csdn.net/codetomylaw/article/details/53019541

版权

最近做一个需求，需求里需要实现一个类似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选项，当我点击取消和确定的时候