Я создаю приложение, в котором у меня есть вид с кастомной печатью на отдельных его дочерних элементах. Итак, я обертываю и компоненты с основным представлением, с несколькими кнопками и TouchableOpacity / TouchableHighlight.
Это работает правильно, но на некоторых мобильных экранах событие onPress не запускается.
Я даже проверил, есть ли проблема с позицией Абсолют, но я не использую ни одного из них. Кроме того, поскольку у меня нет нескольких мобильных экранов для отладки, я не могу просто использовать метод проб и ошибок для проверки правильности реализации.
На данный момент в Nokia 6 и MI Pocco f1 onPress в не запускается.
PS - я добавил цвет фона только для справки.
Здесь-
- Серый (#aaa) - оболочка для основного списка товаров.
- Зелёный и жёлтый - двое детей главной оболочки. (Просмотр).
- Красный и оранжевый - два дочерних элемента оболочки Green View, где красный означает TouchableOpacity / TouchableHighlight, а оранжевый - сборщик
- Синий является дочерним элементом кнопки желтой оболочки.
Кроме того, у меня есть события onPress для компонентов фона Красный, Оранжевый и Синий
Надеюсь, моя проблема понятна всем.
Любая помощь будет по достоинству оценена.
Заранее спасибо.
Для получения дополнительной информации я добавил кодовую базу обертки продукта (серый - # aaa ) -
<View
style={[
mainStyles.row,
{
flex: 1,
marginBottom: 10,
paddingLeft: 10,
paddingRight: 10,
backgroundColor: '#aaa',
},
]}>
<View
style={[
{
flex: 2,
justifyContent: 'center',
marginTop: 10,
marginRight: 25,
backgroundColor: 'green',
padding: 3,
},
]}>
<TouchableHighlight
underlayColor="#eee"
style={{backgroundColor: 'red'}}
onPress={() => {
this.props.navigation.navigate('product-detail-screen', {
productId: product._id,
});
}}>
<View style={{flexDirection: 'row'}}>
<View style={{flex: 2}}>
<Text style={{fontSize: 20}}>{product.root.name}</Text>
</View>
<View
style={[
{
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
},
]}>
<Icon
type="font-awesome"
name="chevron-right"
size={20}
color="#a5a5a5"
/>
</View>
</View>
</TouchableHighlight>
<Picker
selectedValue={
this.state.productVariantForPicker.filter(
variant => variant.productId === product._id,
)[0].value
}
style={{
height: 40,
width: 'auto',
marginTop: 10,
backgroundColor: 'orange',
}}
onValueChange={(itemValue, itemIndex) => {
// * AWESOME LOGIC TO CHANGE THE VARIANT PICKER ;)
let productIndex = null;
this.state.productVariantForPicker.forEach((variant, i) => {
if (product._id === variant.productId) {
productIndex = i;
}
});
let tempProductVariantForPicker = this.state.productVariantForPicker;
tempProductVariantForPicker[productIndex].value = itemValue;
tempProductVariantForPicker[productIndex].variantId =
product.variants[itemIndex]._id;
this.setState({
productVariantForPicker: tempProductVariantForPicker,
});
}}>
{product.variants.map((variant, index) => (
<Picker.Item
key={index}
label={`${variant.value}/₹ ${variant.price}`}
value={variant.value}
/>
))}
</Picker>
</View>
<View
style={[
{
flex: 1,
justifyContent: 'center',
marginLeft: 5,
backgroundColor: 'yellow',
},
]}>
{this.props.cart.cart ? (
// * AWESOME LOGIC OF DISPLAYING BUTTONS BASED ON VARIANTS ADDED IN CART
!this.props.cart.cart.products.filter(
cartProduct =>
cartProduct.variantId ===
this.state.productVariantForPicker.filter(
variant => variant.productId === product._id,
)[0].variantId,
)[0] ? (
<View style={{alignItems: 'center', backgroundColor: 'blue'}}>
<Button
title="Add to cart"
type="outline"
buttonStyle={[
styles.btn,
mainStyles.outlineBtn,
{width: '100%', padding: 5},
]}
loading={this.props.cart.cart.updatingCart}
onPress={this.addToCart.bind(null, product._id)}
titleStyle={{color: variables.mainThemeColor}}
/>
</View>
) : (
<View
style={[mainStyles.row, {marginTop: 15, backgroundColor: 'blue'}]}>
<View style={{flex: 1, justifyContent: 'center'}}>
<Button
title="-"
titleStyle={{
fontSize: 20,
fontWeight: 'bold',
color: variables.mainThemeColor,
}}
type="outline"
buttonStyle={[
styles.btn,
mainStyles.outlineBtn,
{padding: 2, width: '100%', minHeight: 35},
]}
loading={this.props.cart.cart.updatingCart}
onPress={this.changeProductQuantityinCart.bind(
null,
'decrement',
this.state.productVariantForPicker.filter(
variant => variant.productId === product._id,
)[0],
)}
/>
</View>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{fontSize: 18}}>
{
this.props.cart.cart.products.filter(
cartProduct =>
cartProduct.variantId ===
this.state.productVariantForPicker.filter(
variant => variant.productId === product._id,
)[0].variantId,
)[0].quantity
}
</Text>
</View>
<View style={{flex: 1}}>
<Button
title="+"
titleStyle={{
fontSize: 20,
fontWeight: 'bold',
color: variables.mainThemeColor,
}}
type="outline"
buttonStyle={[
styles.btn,
mainStyles.outlineBtn,
{padding: 2, width: '100%', minHeight: 35},
]}
loading={this.props.cart.cart.updatingCart}
onPress={this.changeProductQuantityinCart.bind(
null,
'increment',
this.state.productVariantForPicker.filter(
variant => variant.productId === product._id,
)[0],
)}
/>
</View>
</View>
)
) : (
// * Display this at initial, if cart is empty
<View style={{alignItems: 'center'}}>
<Button
type="outline"
buttonStyle={styles.btn}
title="Add to cart"
onPress={this.addToCart.bind(null, product._id)}
titleStyle={{color: variables.mainThemeColor}}
/>
</View>
)}
</View>
</View>;
PS- Добавление скриншотов экранов для большей наглядности.
