react native - ListView with overlaying View not scrolling -
i tried implement standard view mobile dashboard screen drawer on top left menu icon click
however when put menu image view, listview stops scrolling. if put listview overlaying view, menu not clickable anymore. tried use zindex style property doesn't solve problem :( code is:
/** * sample react native app * https://github.com/facebook/react-native * @flow */ import react, { component } 'react'; import { appregistry, stylesheet, text, view, image, touchableopacity, listview, dimensions } 'react-native'; import drawer 'react-native-drawer'; import controlpanel './controlpanel'; import prayereventitem './prayereventitem'; import api './api'; export default class wspolnamodlitwa extends component { constructor(props) { super(props); api.getprayerevents(function(response) { console.log('response: getprayerevents()') }).catch((error) => { console.error(error); }); const ds = new listview.datasource({rowhaschanged: (r1, r2) => r1 !== r2}); this.state = { datasource: ds.clonewithrows(['row 1', 'row 2', , 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2']), }; } closecontrolpanel = () => { this._drawer.close() }; opencontrolpanel = () => { this._drawer.open() }; render() { return ( <drawer ref={(ref) => this._drawer = ref} type="overlay" content={<controlpanel />} taptoclose={true} opendraweroffset={0.2} // 20% gap on right side of drawer panclosemask={0.2} closeddraweroffset={-3} styles={drawerstyles} tweenhandler={(ratio) => ({ main: { opacity:(2-ratio)/2 } })}> <view style={ [styles.container, styles.containercenter] }> <image source={require('./img/background_dashboard1.png')} style={[styles.container, styles.backgroundimage]}> <view style={ styles.menuview }> <touchableopacity onpress={this.opencontrolpanel}> <image source={require('./img/icon_menu.png')} style={styles.menuimage}/> </touchableopacity> </view> <listview style={[styles.container, styles.listview]} datasource={this.state.datasource} renderrow={(rowdata) => <prayereventitem/>} /> </image> </view> </drawer> ); } } // const styles = stylesheet.create({ container: { flex: 1, }, containercenter: { backgroundcolor: 'orange', }, backgroundimage: { resizemode: 'cover', // or 'stretch' width: dimensions.get('window').width, height: dimensions.get('window').height, }, listview: { paddingtop: 40, paddingbottom: 40, }, menuview: { position: 'absolute', top: 12, left: 8, bottom: 0, right: 0, }, menuimage: { width: 32, height: 32, } }); const drawerstyles = { drawer: { shadowcolor: '#000000', shadowopacity: 0.8, shadowradius: 3}, main: {paddingleft: 3}, } appregistry.registercomponent('wspolnamodlitwa', () => wspolnamodlitwa);

Comments
Post a Comment