ios - React-Native. TouchableOpacity works only when tap with 2 fingers -
i'm running app via react-native , native-base , got problems component touchableopacity.
when i'm writing component
<touchableopacity onpress={() => {this.onpress()}}> <text>some text</text> </touchableopacity it works perfect, when tap 1 finger
but when i'm running - code:
renderlist () { return ( <list> {this.state.data.map( ( restaurant, index ) => { return ( <touchableopacity onpress={() => { this.onpress(); }} key={index}> <view style={styles.example}> <listitem> <thumbnail square size={80} source={{ uri: 'image url' }}/> <body> <text>{restaurant.title}</text> <text note>{restaurant.shortdescription}</text> </body> </listitem> </view> </touchableopacity> ); } )} </list> ); } it ignoring 1 tap, twice tap etc, working when tap 2 fingers. didn't find info problem. may 1 know how solve this?
thanks
added fullcode:
import react, { component } 'react'; import { container, button, header, left, icon, body, right, text, content, list, listitem, thumbnail } 'native-base'; import { stylesheet, touchableopacity, view } 'react-native'; export default class restaurants extends component { constructor ( props ) { super( props ); this.state = { data: this.props.data }; } onpress () { console.log( 'hello' ); } renderlist () { return ( <list> {this.state.data.map( ( restaurant, index ) => { return ( <touchableopacity onpress={() => { this.onpress(); }} key={index}> <view style={styles.example}> <listitem> <thumbnail square size={80} source={{ uri: 'image url' }}/> <body> <text>{restaurant.title}</text> <text note>{restaurant.shortdescription}</text> </body> </listitem> </view> </touchableopacity> ); } )} </list> ); } render () { return ( <container> <header style={styles.header}> <left> <button transparent> <icon style={styles.header_icon} name="arrow-back"/> </button> </left> <body> <text>Ресторанны</text> </body> <right> <button transparent> <icon style={styles.header_icon} name="restaurant"/> </button> </right> </header> <content> {this.renderlist()} </content> </container> ); } } const styles = stylesheet.create( { header: { backgroundcolor: '#606dff' }, header_icon: { color: 'black' }, example: { backgroundcolor: 'red' } } );
as spoken, i'll post here it's better read , copy code.
try this:
renderlist() { return ( <list> { this.state.data.map( ( restaurant, index ) => { return ( <listitem> <touchableopacity onpress={() => { this.onpress(); }} key={index} > <view style={styles.example}> <thumbnail square size={80} source={{ uri: 'image url' }}/> <body> <text>{restaurant.title}</text> <text note>{restaurant.shortdescription}</text> </body> </view> </touchableopacity> </listitem> ); }); } </list> ); } i swapped <listitem> , <touchableopacity> there might conflict way wrote.
let me know if worked.
Comments
Post a Comment