reactjs - Nested Touchable with absolute position -
i need implement interface object clickable, area of object action, this:
|-----------| | | | -> clicking on small area action | ---| | | | | | | -> clicking on area action | | |-----------|
i did implementation similar structure:
<view> // container <touchable onpress={do x}> // large area <touchable onpress={do y} style={{position: absolute, top: 0, right: 0}}> // small area </view>
the problem small area never activate onpress props. event triggered on large area.
can me this?
thanks!
i'm not sure if have styling show small container, if there no width or height, not trigger, check make sure have set width , height:
smallcontainer: { width: 120, // set height:100, // set position:'absolute', top:0, right:0 }
i've gotten setup working here. code below.
https://rnplay.org/apps/stpoxg
'use strict'; var react = require('react-native'); var { appregistry, stylesheet, text, view, touchablehighlight } = react; var sampleapp = react.createclass({ render() { return ( <view style={styles.container}> <view style={{flexdirection:'row'}}> <touchablehighlight onpress={ () => alert('largecontainer') } style={styles.container1}> <view><text>hello1</text></view> </touchablehighlight> <touchablehighlight onpress={ () => alert('smallcontainer') } style={styles.container2}> <view><text>hello2</text></view> </touchablehighlight> </view> </view> ); } }); var styles = stylesheet.create({ container: { flex: 1 }, container1: { width:320, height:300, backgroundcolor: 'red' }, container2: { width: 120, height:100, position:'absolute', backgroundcolor: 'green', top:0, right:0 } }); appregistry.registercomponent('sampleapp', () => sampleapp);
Comments
Post a Comment