beefe / react-native-picker Goto Github PK
View Code? Open in Web Editor NEWA Native Picker with high performance.
A Native Picker with high performance.
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.
谢谢!
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.
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?
_renderParallelWheel(pickerData){
let me = this;
return pickerData.map((item, index) => {
return (
<View style={styles.pickerWheel} 这里缺少一个key>
......
</View>
);
});
}
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
I run your demo ,but the picker show [object Object]
我现在运行demo的时候,选择年份那个。如果我选择2016年3月5号,这个时候,我如果只变动年,比如变成2017年,那么月和日都自动选择变成了1。 这个是已知bug吗。还是本来这样设计的。
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
No need to get a ref if we can update a show
boolean prop
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}
/>
);
}
});
如何修改时间的字体大小
如题目,这个问题解决了吗?或者该怎么解决?
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.
当我有多个picker的时候,速度会很慢,该怎么弄?
When I have a number of picker, the speed will be very slow, how to get?
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
改变月份后,日期不会变化
比如在绑定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 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.
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.
android Picker首次弹出时,连续点击周围会报OnValueChange的错误..闪退
"undefined is not an object (evaluating 'Picker_init')"
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
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.
在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]} />
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!
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.
我希望在表单中使用这个组件,就像select一样,选择,然后弹出Picker,但我发现,一旦把Picker包在一个单独的组件中,比如写在View中,它的底部会以这个组件的底部为基准,而不是以屏幕的底部为基准,请问我如何能做到,即把Picker封装到select组件中,同时让他以屏幕低端为基准slide up and slide down。
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
Changing your index.js I achieved what I wanted (attached) but all my changes will be lost every time I upgrade your package.
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];
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?
当我把一个1~999的数字数组给pickerData时,picker弹起的速度超级慢,至少有5秒钟之后才弹起,想问一下有优化的办法吗?
我在list中添加了picker后,点击第一个item后出现picker,随意滚动到一个值的位置,然后点击第二个item出现对应的数据后,稍微一滑动就直接滚动到上次选择的值的位置了,只有安卓发送了这个问题,iOS正常
两个页面,主页面是个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组件,在onpress时传入相应的index来确定pickdata,这样也不用放很多组件了,不成熟的想法,望指点啊
// 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.
This module works great on iOS, but the selected item text size is too big in Android, how to change the font size? Thanks!
当我有多个picker的时候,速度会很慢,该怎么弄?
When I have a number of picker, the speed will be very slow, how to get?
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
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.
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)
<Picker
ref={(cpicker) => {this.cpicker = cpicker}}
pickerHeight={300}
showDuration={300}
pickerData = {pickerData}
selectedValue = {3}
onPickerDone={()=>(ToastAndroid.show(????, ToastAndroid.SHORT))}//when confirm your choice
/>
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 seems to be caused because of styles.picker containing an overflow: 'hidden' property.
Removing this property properly displays the pickers.
组件为什么默认是开启的- -设置了没效
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.