Под названием я подразумеваю, что при нажатии на анимацию ничего не происходит. Но когда я нажимаю немного слева от него, это работает.
Вот мой код:
<View style={{flex: 1, alignItems:'center', right: 0, left: 0, flexDirection:'row', position: 'absolute', alignSelf:'center', top: 10}}>
{this.state.queryid.includes(item.id) ?
<TouchableOpacity
ref="unlikeButton"
onPress={() => this.anim_unlike(item)}
style={{ zIndex: 1, }}
hitSlop={{ top: 20, left: 20, bottom: 20, right: 100 }}>
<Animation
progress={item.unprogress}
source={require('../Animations/favourite_app_icon.json')}
style={{ height: 50, width: 50, alignSelf:'center', marginLeft: 0, left: 5}}
resizeMode={`contain`}
/>
</TouchableOpacity>
:
<TouchableOpacity
ref="likeButton"
onPress={() => this.anim_like(item)}
style={{zIndex: 1, }}
hitSlop={{ top: 20, left: 20, bottom: 20, right: 100 }}>
<Animation
progress={item.progress}
source={require('../Animations/favourite_app_icon.json')}
style={{ height: 50, width: 50, alignSelf:'center', marginLeft: 0, left: 5}}
resizeMode={`contain`}
/>
</TouchableOpacity>
}
<Text style={{alignSelf:'center', color: 'black', fontFamily: Fonts.QuoFont, fontSize: 15}}>{item.likes}</Text>
</View>
Там, где вы видите hitSlop
, я пытаюсь расширить сенсорную панель, но это совсем не работает. И когда я убираю position: absolute
из вида, сенсорная область корректно функционирует в своей области, в звездочке. Мне нужно это абсолютно, чтобы остальные мои элементы могли оставаться в нужном месте. Было бы замечательно, если бы было что-то, что могло бы заставить представление вести себя как абсолютное, если бы оно не мешало другим элементам.