TouchableWithoutFeedback永遠不會觸發觸摸事件

Question

我有以下React-Native代碼，它會警告用戶它已被按下，但是它什么都不響應。

我曾嘗試使用不同的Touchable組件，但似乎沒有一個起作用，唯一的組件是Button但這並不是我真正想要的，我正在構建一個滑塊，因此按鈕並不適合於此。

無論如何，這是我的代碼：

import React, {Component} from 'react';
import {View, TouchableWithoutFeedback, Alert, Text} from 'react-native';
import styles from './styles.js';
import LinearGradient from 'react-native-linear-gradient';

export default class BrightnessSlider extends Component {
    value: 100;

    constructor(...args) {
        super(...args);
    }

    render() {
        return (
            <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={["#222", "#ddd"]} style={styles.brightnessSliderRunnable}>
                <View style={styles.brightnessSliderTrack}>
                    <TouchableWithoutFeedback onPress={() => Alert.alert("Hello World")}>
                        <View style={styles.brightnessSliderThumb} />
                    </TouchableWithoutFeedback>
                </View>
            </LinearGradient>
        )
    }
}

和./styles.js

import {StyleSheet} from "react-native";

export default styles = StyleSheet.create({
    brightnessSliderRunnable: {
        top: 50,
        height: 9,
        width: width - 20,
        left: 10,
        backgroundColor: "#555",
        opacity: 1,
        elevation: 1,
        borderWidth: 0
        // position: "absolute"

    },
    brightnessSliderThumb: {
        width: 23,
        height: 23,
        borderColor: "#888",
        // opacity: 1,
        borderWidth: 2,
        backgroundColor: "#ffffff",
        position: "absolute",
        top: -7,
        borderRadius: 5,
        elevation: 2
    },
    brightnessSliderTrack: {
        width: "100%",
        elevation: 1,
        borderWidth: 0
    }
});

謝謝你的幫助

Answer 1

發問者的原始代碼 。

解

由提問者的解決方案添加。

---

將位置： absolute更改為位置： relative 。

---

如下更改由StyleSheet制作的樣式類型。

你原來的

{...styles.colourContainer, opacity: 100 - this.darkness}

推薦方式。

[styles.colourContainer, {opacity: 100 - this.darkness}]

我測試了代碼，當我們觸摸白色方塊時，它運行良好。

在iOS上測試。

原始App.js。

App.js被我改變了。

 import React, {Component} from 'react'; import {View, Dimensions, Text} from 'react-native'; import BrightnessSlider from '../components/BrightnessSlider'; import styles from '../components/TempStyle.js'; const d = Dimensions.get('window'), width = d.width, height = d.height; export default class BrightnessSliderTest extends Component { constructor(...args) { super(...args); this.darkness = 0; this.prevColours = ["#ff0000", "#00ff00", "#0000ff"]; } render() { // It is not possible just access the style created by StyleSheet.create(). Do not use StyleSheet.create() or change to flatten the StyleSheet object. const sty = [styles.colourContainer,{ opacity: 100 - this.darkness}]; return ( <View style={styles.container}> <View style={sty}> <View style={styles.toolBar}> <View style={styles.colourPalette}> {this.prevColours.map((i, a) => <View key={String(a)} style={[styles.colourTile, {backgroundColor: i}]}/>)} </View> {/* <Button title={"Save To Palette"} onTap={this.saveToPalette}>Save</Button> */} </View> <BrightnessSlider /> </View> </View> ); } } 

為什么？

我不確定如何在其他組件中使用您的組件。 但是，如果您沒有足夠大的容器可以顯示組件，則觸摸區域可能不起作用。 這就是為什么我有時在測試中將backgroundColor用於容器的原因。

---

在測試有問題的完整代碼后添加。

不能僅通過由StyleSheet.create（）創建的傳播運算符來訪問樣式。 不要使用StyleSheet.create（）或進行更改以展平StyleSheet對象。

而且樣式可以與平台（iOS，Android）不同地工作。