Comments (6)
I just want to make an animation for the Picker show,
At first, make outer view {{height: Dimensions.get('window').height}}
, and make the Picker
{{bottom: 0, position: 'absolute'}}
, then we can slideUp the Picker when we clicked the 'show button'.
If you want to show Picker at first, you can change the style of outer view or style of Picker.
from react-native-picker.
@xwenliang what I am trying to say is that the components displayed after the picker get pushed back outside of the screen, because the outer view height is the height of the screen.
Moreover, components being displayed after the picker are displayed above the picker if you do not set {{height: Dimensions.get('window').height}}
So that's my question: how do you display components after the picker so they don't get pushed outside of the screen, and do not display above the picker?
Thanks!
from react-native-picker.
I mean it works if you place the picker very last in the component list then you can have the button opening it anywhere... But is there another, more elegant, way than splitting up the two?
from react-native-picker.
I add customized style support for the picker in v0.4.1, I have no idea if this could make sense for you.
render(){
return (
<View>
<View style={{height: 100, paddingTop: 80, backgroundColor: 'red'}}>
<Text>this is something above picker</Text>
</View>
<View style={{height: 240, position: 'relative', backgroundColor: 'green'}}>
<Picker
ref={picker => this.picker = picker}
pickerHeight={240}
showDuration={300}
pickerData={createDateData()}
selectedValue={['2015年', '12月', '12日']}
onPickerDone={(pickedValue) => {
console.log(pickedValue);
}}
style={{top: 0}}
pickerToolBarStyle={{height: 0, opacity: 0}}
/>
</View>
<View style={{height: 100, backgroundColor: 'yellow'}}>
<Text>this is something below picker</Text>
</View>
</View>
);
}
from react-native-picker.
Thanks I'm closing the issue.
from react-native-picker.
@xwenliang Is it still possible to display the picker with a component on the bottom as in your image?
from react-native-picker.
Related Issues (20)
- 标题过长时, 安卓上标题和左右按钮有部份重叠
- Task :react-native-picker:compileReleaseJavaWithJavac FAILED HOT 2
- Task :react-native-picker:compileReleaseJavaWithJavac FAILED
- Typescript typings are wrong for `onPicker*` functions
- Attempted import error: 'PickerIOS' is not exported from 'react-native-web/dist/index'.
- Changing font size hides title toolbar HOT 2
- android/iOS
- Radio Buttons on Android Devices
- java.lang.IllegalStateException: Should be called from the main thread, not Thread[mqt_native_modules HOT 2
- fontSize改大会遮挡住toolbar
- TypeError: undefined is not an object (evaluating '_reactNativePicker.Picker.init
- picker button text cannot display all
- could not find method compile() for arguments
- Compiling failed because targetSdkVersion is too low HOT 1
- android运行报错
- could not find method compile() for arguments HOT 4
- ios,picker点击取消按钮后再次打开picker会导致无法显示数据,附解决办法。
- [iOS] 关闭动画无效果的原因
- Alternative with Expo?
- Cancel and Confirm Button hiding behind the dynamic island and notch
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-picker.