beefe / react-native-picker Goto Github PK

hai when i run the code in 6 the picker working fine and when i check in 5s, the Cancel button 'l' is not displaying, plaese check it and update the repo, please respond to it whether it bug or any changes did i need done

我在list中添加了picker后，点击第一个item后出现picker，随意滚动到一个值的位置，然后点击第二个item出现对应的数据后，稍微一滑动就直接滚动到上次选择的值的位置了，只有安卓发送了这个问题，iOS正常

Could you please also add dismiss method like
dismiss(){ this._slideDown(); }

This is useful when there are more than one Pickers. Need to dismiss others

// This will not work on android
<Picker
  style={styles.picker}
/>
const styles = StyleSheet.create({
  picker: {
    height: 400,
  },
});

// This will work on android
<Picker
  style={{height: 400}}
/>

Both work well on iOS.

The reason it will not work on Android for the first case is that this.state.style will get a Stylesheet generated number instead of an Object. Thus Animated.View does not get a proper height.

But the behaviours are inconsistent on iOS and Android, not sure if it's bug of React Native or this library.

Hello,

Would it be possible for you to add the elevation prop on Android? When using Material Design, some buttons have a higher elevation and they appear on top of the picker.

Thanks so much

比如在绑定pickerData后，再更新pickerData时，数据还是第一次的。有做如下修改，没有详细测试，请验证是否可行？

......
static defaultProps = {
        pickerBtnText: '完成',
        pickerHeight: 250,
        showDuration: 300,
        onPickerDone: ()=>{}
    }

    updateStates(props = this.props){
        //the pickedValue must looks like [wheelone's, wheeltwo's, ...]
        //this.state.selectedValue may be the result of the first pickerWheel
        let pickedValue = props.selectedValue;
        let pickerData = props.pickerData;
        let pickerStyle = pickerData.constructor === Array ? 'parallel' : 'cascade';
        let firstWheelData;
        let firstPickedData;
        let secondWheelData;
        let secondPickedDataIndex;
        let secondPickedData;
        let thirdWheelData;
        let thirdPickedDataIndex;
        let cascadeData = {};
        if(pickerStyle === 'parallel'){
            //compatible single wheel sence
            if(pickedValue.constructor !== Array){
                pickedValue = [pickedValue];
            }
            if(pickerData[0].constructor !== Array){
                pickerData = [pickerData];
            }
        }
        else if(pickerStyle === 'cascade'){
            //only support three stage
            firstWheelData = Object.keys(pickerData);
            firstPickedData = props.selectedValue[0];
            secondPickedData = props.selectedValue[1];
            cascadeData = this._getCascadeData(pickerData, pickedValue, firstPickedData, secondPickedData, true);
        }
        let slideAnim = (this.state && this.state.slideAnim ? this.state.slideAnim : null);
        if (!slideAnim)
            slideAnim = new Animated.Value(-props.pickerHeight);
        this.setState({
            slideAnim: slideAnim,
            pickerData,
            selectedValue: pickedValue,
            //list of first wheel data
            firstWheelData,
            //first wheel selected value
            firstPickedData,
            //list of second wheel data and pickedDataIndex
            secondWheelData: cascadeData.secondWheelData,
            secondPickedDataIndex: cascadeData.secondPickedDataIndex,
            //third wheel selected value and pickedDataIndex
            thirdWheelData: cascadeData.thirdWheelData,
            thirdPickedDataIndex: cascadeData.thirdPickedDataIndex
        });
        this.pickedValue = pickedValue;
        this.pickerStyle = pickerStyle;
    }

    constructor(props, context){
        super(props, context);
    }

    componentWillMount() {
        this.updateStates();
    }

    componentWillReceiveProps(nextProps) {
        this.updateStates(nextProps);
    }

    _slideUp(){
        this.isMoving = true;
......

如题目，这个问题解决了吗？或者该怎么解决？

I've upgraded my project to React native 0.26 and I got this error:
"Super expression must either be null or a function, not undefined" and it disappear when I remove your component.

On iOS when a picker is activated, you can tap outside of the picker and it will cancel the picker. This would be a nice feature if we could put a transparent TouchableNoFeedback that cancels the picker when clicked.

I added three wheel parallel picker in my code that is mentioned below:

createParallelPickerData(){
      let yearData = []
      let firstRow = []
      let secondRow = []
      let thirdRow = []
      for(let i=1950;i<2050;i++){
          firstRow.push(i)
      }
      for(let j=0;j<1;j++){
          secondRow.push("to")
      }
      for(let k=1950;k<2050;k++){
          thirdRow.push(k)
      }

      yearData.push(firstRow)
      yearData.push(secondRow)
      yearData.push(thirdRow)

      return yearData
}


<Picker
    ref={(picker) => {this.picker = picker}}
    style={[styles.pickerView]}
    showMask={true}
    showDuration={300}
    pickerData={this.createParallelPickerData()}
    pickerBtnText = 'Apply'
    pickerBtnStyle = {[styles.applyBtn]}
    pickerToolBarStyle = {[styles.toolBar]}
    selectedValue={['2000', 'to', '2016']}
    onPickerDone={(pickedValue) => {
    this.setYearData(pickedValue)
}}/>

As you can see in above code, I added selectedValue={['2000', 'to', '2016']} to show the initially selected value of picker like '2000' in first wheel , 'to' in second wheel and '2016' in third wheel but it's not showing like that. it is showing like ['1950', 'to' , '1950'] default picker value because 1950 is the first index value of pickerData array which you can see in createParallelPickerData().

Now , I want to know how we can show the predefined selected value in picker because the value set in selectedValue property is not displaying in picker as selected value.

I try uninstall module and reinstall it but same error. What I have to do to make it work? I'm using README's example code.

Here is the result of react-native link:

当我有多个picker的时候，速度会很慢，该怎么弄？
When I have a number of picker, the speed will be very slow, how to get?

Your picker looks great and customizable on your pictures. I installed it with npm and copy pasted your /demo/date-picker.js example in datepicker.js. Then I included it in my main project and called it in the view:

var DatePicker = require('./datepicker');
[...]
<View style={styles.formAnswersContainer}>
     <DatePicker/>            
</View>

The error I get on the iOS simulator is

Invariant Violation: Element Type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'exports'.

What am I doing wrongly?

如题，我有一组数据，我不能确定需要多少个picker组件，在onpress时传入相应的index来确定pickdata,这样也不用放很多组件了，不成熟的想法，望指点啊

It's a bug related to the showMask prop, when false is provided as value.
https://github.com/beefe/react-native-picker/blob/master/index.js#L405
You should probably return an empty View instead of null when showMask is a falsy value and get the picker height in another way because this.state.style.height could be undefined .
I'll submit a pull request if you want.

This is not an issue, all works perfectly fine, just a question. Please let me know if I should write it somewhere else.

The onPickerDone event is fired when the pickerBtn is pressed.

In my case the react-native-picker is visible all the time in a form, with no bar (i.e. no pickerBtn or pickerCancel). The reason I did it this way is to remove friction in the UX. I would like the user to select the date and every time he changes any wheel an event (e.g. onPickerDone) to be fired.

This way I can update the state of my form component with the new date selected every time the user changes it and the user does not need to click any button to confirm his choice.

Do you have any suggestion on how I could achieve this?

Thank you very much in advance.

[
react-native -0.31

android Picker首次弹出时,连续点击周围会报OnValueChange的错误..闪退

No need to get a ref if we can update a show boolean prop

This seems to be caused because of styles.picker containing an overflow: 'hidden' property.

Removing this property properly displays the pickers.

Hi,

Me again. :) One great feature for this plugin would be the ability to pass in an object:

[
  {
    label: 'One'
    value: 1,
  },
  {
    label: 'Two'
    value: 2,
  },
  {
    label: 'Two'
    value: 3,
  },
],

Then be able to specify a selector to use as the label that is shown to the user. When selected, the entire object would be returned. This way you could have hidden data in the selector.

在RN0.16.0中使用时，直接报错。
错误内容：
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
代码：
<Picker pickerData={[1, 2, 3, 4]} />

while i install this repo example pickerTest i got an error like this

组件为什么默认是开启的- -设置了没效

"undefined is not an object (evaluating 'Picker_init')"

谢谢！

当我把一个1~999的数字数组给pickerData时，picker弹起的速度超级慢，至少有5秒钟之后才弹起，想问一下有优化的办法吗？

如何修改时间的字体大小

我现在运行demo的时候，选择年份那个。如果我选择2016年3月5号，这个时候，我如果只变动年，比如变成2017年，那么月和日都自动选择变成了1。 这个是已知bug吗。还是本来这样设计的。

Hi there. Great plugin! I've located what I think is a bug. Specifically it happens if you have a device in landscape when you open the app but later rotate into portrait. It happens on both iOS and Android.

Here is a shot of the problem in action:

两个页面，主页面是个scroll-tab-view, 嵌套页面中含有picker，但是picker不显示

    <View style={styles.normal}>
        <View style={styles.header} >
            <Image style={styles.img} source={require('./images/left.png')}/>
            <Text style={styles.headerText} >收入</Text>
          <View />
        </View>
      <ScrollableTabView style={styles.normal}>
        <ScrollView tabLabel="统计"  style={styles.tabView}>
          <IncomeSummary />
        </ScrollView>
        <ScrollView tabLabel="明细"   style={styles.tabView}>
          <IncomeDetail  />
        </ScrollView>
      </ScrollableTabView>
      </View>

  _onPressButton:function(){

    this.setState({pickerloaded:true})
  },

  render: function() {
    var picker= this.state.pickerloaded ? 
         <Picker
          ref={picker => {this.picker = picker;}}
          pickerHeight={300}
          showDuration={300}
          pickerData={datelist}//picker`s value List
          selectedValue={this.state.date}//default to be selected value
          onPickerDone={this.onPickerDone} />:
           null;

    return (
        <View>
            <View style={styles.section}>
              <View style={{flexDirection:'row',justifyContent:'center',flex:1}}>
                <Text style={styles.sectiontext}>{this.state.date}</Text>
                <TouchableOpacity  onPress={this._onPressButton}>
                <Image style={styles.img}source={require('./images/down.png')} />
                </TouchableOpacity>
              </View>
              <View style={{flex:1}}>
               <Text style={styles.sectiontext}>比上月: <Text style={{color:'red'}}>{listdata.total.percent}</Text></Text>
              </View>
            </View>
           <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow} />
            <View style={styles.sept}/>
            <View style={styles.row}>
              <Text style={styles.coltext}>{listdata.total.name}</Text>
              <Text style={[styles.coltext,{flex:2,color:'red',fontSize:26}]}>{listdata.total.number}</Text>
              <Text style={[styles.coltext,{textAlign:'right',color:'#9C9C9C'}]}>{listdata.total.count}</Text>
           </View>
            {picker}
          </View>
    );
  }
});

<Picker
ref={(cpicker) => {this.cpicker = cpicker}}
pickerHeight={300}
showDuration={300}
pickerData = {pickerData}
selectedValue = {3}
onPickerDone={()=>(ToastAndroid.show(????, ToastAndroid.SHORT))}//when confirm your choice
/>

Hi, the 0.4.0 works great! How do you suggest I customize the style of the picker without changing your code in the node_modules folder?

In particular I would like to

1. remove the background color so that it takes the one from my app
2. remove the pickerToolbar since I embedded it in a form

Changing your index.js I achieved what I wanted (attached) but all my changes will be lost every time I upgrade your package.

Thanks!

我希望在表单中使用这个组件，就像select一样，选择，然后弹出Picker，但我发现，一旦把Picker包在一个单独的组件中，比如写在View中，它的底部会以这个组件的底部为基准，而不是以屏幕的底部为基准，请问我如何能做到，即把Picker封装到select组件中，同时让他以屏幕低端为基准slide up and slide down。

I run your demo ,but the picker show [object Object]

改变月份后，日期不会变化

I tried to use the data-picker example and it works perfectly fine but February seems to allow more than 29 days although the 'for' cycle in the code seems to correctly go just to 29.

When I try to change the value by scrolling the wheel up and down, the wheel always return back to the default selected value.

<Picker
                            ref={picker => this.picker = picker}
                            pickerHight={300}
                            showDuration={300}
                            pickerBtnText="Done"
                            pickerCancelBtnText="cancel"
                            pickerData= {['value 1', 'value 2']}
                            selectedValue='value 1'
                            onPickerDone = {pickerValue => console.log(pickerValue)}
                        />

From the code above, the wheel always return back to the default selected value of 'value 1'. However, when I click on Done, it does print out the correct value.

This module works great on iOS, but the selected item text size is too big in Android, how to change the font size? Thanks!

Thanks for the great picker component, everything works perfectly in Android
In my iOS simulator, the picker works properly in my module, but it is appears outside my module(on top of other components, even though I call the hide method):

environment: iOS 9.3 simulator,
code:

      <Picker
        ref="picker"
        style={{ height: 300 }}
        showDuration={300}
        showMask={true}
        pickerData={this.state.types}
        selectedValue={this.state.type}
        pickerElevation={1}
        pickerBtnText={'Choose'}
        //pickerToolBarStyle={{height:40, backgroundColor:'rgba(200, 200, 200, 1.0)'}} 
        onPickerCancel={this.setHeaderViewStyle}
        onPickerDone={this._onTypeChange}
      />

Please kindly let me know if any parameter can use to remove the annoying issue.

While I use the Picker , something happened like this

          <TouchableOpacity style={{height: 40, flex: 1}} onPress={this._onPressHandle.bind(this)}>
            <Text>点我</Text>
          </TouchableOpacity>
          <Picker
            ref={picker => this.picker = picker}
            pickerHeight={300}
            showDuration={300}
            showMask={true}
            pickerData={['Hello', 'world']} //picker`s value List
            selectedValue ={'world'}
            onPickerDone={(pickedValue) => {
            console.log(pickedValue) }
          }/> //default to be selected value

Above all is my demo , anything wrong ? (function _onPressHandle is ok)

Hi, When I trying to use this component, it keeps showing a error, feel like it's some props have incorrect value.

element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of xxxx.

do you know why?

当我有多个picker的时候，速度会很慢，该怎么弄？
When I have a number of picker, the speed will be very slow, how to get?

var pickerData = {
a: {
a1: [1,2,3,4],
a2: [5,6,7,8],
a3: [9,10,11,12]
},
b: {
b1: [1,2,3,4],
b2: [5,6,7,8],
b3: [9,10,12,12]
}

};
var selectedValue = ['a', 'a1', 1];
我用的这组数据，我选择a，a2.应该第三列是5,6,7,8 但是还是1,2,3,4

This is not an issue, but this is my implementation when I am opening your picker within a form, and the keyboard might be still be opened from clicking on another input. This allows for closing the keyboard automatically before opening your picker (works on both iOS and Android on RN 0.19).

Events keyboardWillShow and keyboardWillHide are not implemented in Android, so using keyboardDidShow and keyboardDidHide instead.

const dismissKeyboard = require('dismissKeyboard')

var BasePicker = React.createClass({
  componentWillMount () {
    DeviceEventEmitter.addListener('keyboardDidShow', this.keyboardDidShow);
    //DeviceEventEmitter.addListener('keyboardDidHide', this.keyboardDidHide)
  },
  keyboardDidShow (e) {
    if (this.isPickerShow()) {
      this.toggle();
    }
  },
  toggle(){
    if (!(this.isPickerShow())) {
        dismissKeyboard();
    }
    return this.basePicker.toggle();

  },
  isPickerShow() {
    try{ //try catch because this is not always defined
      return this.basePicker.isPickerShow;
    } catch(e) {
      return false;
    }
  },
    render(){
        return (
                <Picker
                    ref={(picker) => this.basePicker = picker}
            pickerBtnText = "OK"
            pickerCancelBtnText = "Cancel"
                    pickerHeight={260}
                    showDuration={100}
            {...this.props}
                />
        );
    }
});

Hello,

Great component. I'm just not understanding why you wrap your component in a view with style={{height: Dimensions.get('window').height}} which means that the remaining components coming after the picker are pushed outside of the screen.

How would you go about fixing that?

Thanks

In cascade mode the wheels that get refreshed start from empty value. Then if you scroll up all the values show normally.

Since the user might get confused seeing the values disappearing how can I make it in a way that when a wheel is refreshed its default value starts from the first in the list (instead of a blank value)?

Thanks!

The test data is below, when I change the 2nd wheel, the data for 3rd wheel is always [1,2,3,4].
pickerData = {
a: {
a1: [1,2,3,4],
a2: [5,6,7,8],
a3: [9,10,11,12]
},
b: {
b1: [1,2,3,4],
b2: [5,6,7,8],
b3: [9,10,12,12]
}
...
};
selectedValue = ['a', 'a1', 1];