TouchableWithoutFeedback никогда не запускает сенсорные события - PullRequest
Новая
       75

TouchableWithoutFeedback никогда не запускает сенсорные события

0 голосов
/ 13 января 2019

У меня есть следующий 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
    }
});

Спасибо за любую помощь

1 Ответ

0 голосов
/ 13 января 2019

Оригинал спрашивающего код .

Решение

Добавлено решением вопроса.

Изменить положение: absolute на положение: relative.

Измените тип вашего стиля, созданный таблицей стилей, как показано ниже.

Ваш оригинал. 

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

Рекомендовать способ. 

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

Я тестировал код, и он хорошо работает, когда мы прикасаемся к белому квадрату.

Протестировано на iOS.

enter image description here

Оригинал 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).

...