Question

我正在创建一个应用程序，在该应用程序中，我可以按需查看其单独子级上的视图。因此，我将包装和组件与主视图一起使用，并带有几个按钮和TouchableOpacity / TouchableHighlight。

这正常工作，但是在某些移动屏幕上，onPress事件未触发。

我什至检查了绝对位置存在问题，但我没有使用任何这些。另外，由于我没有几个可调试的移动屏幕，所以我不能仅执行点击和试用方法来检查正确的实现。

目前，在诺基亚6和MI Pocco f1中，onPress不会触发。

P.S-我添加了背景色仅供参考。

这里-

灰色（#aaa）是主要产品列表包装器。
绿色和黄色是主包装的两个子项。（查看）。
红色和橙色是绿色视图包装的两个子元素，其中红色是TouchableOpacity / TouchableHighlight，橙色是Picker。
蓝色是黄色包装的纽扣子。

此外，我还在红色，橙色和蓝色背景组件上进行了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>;

P-S-添加屏幕截图以更加清晰。

反应本机onPress Touchableopacity或TouchableHighlight在某些手机屏幕上无法正常工作

0 个答案: