Непрозрачная непрозрачность, не реагирующая на экране навигатора стека - React Native - PullRequest
Новая
       60

Непрозрачная непрозрачность, не реагирующая на экране навигатора стека - React Native

0 голосов
/ 23 февраля 2020

Я создаю приложение React Native, оно использует React Navigation. Я использую TouchableOpacity во всем приложении, однако на экране стекового навигатора оно, похоже, не работает вообще. Прикосновение к элементу не меняет непрозрачность, и функция нажатия не работает. Сам экран отображается нормально, и все другие экраны в моем приложении имеют TouchableOpacity, которые работают нормально.

Использование кнопки также не отвечает, я думаю, что это проблема реагирования навигации потенциально? Нет проблем с переходом на экран?

Вот мой экран; 

import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert, Button}  from 'react-native';

class RaceScreen extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
        }
    }
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
                <TouchableOpacity onPress = {() => console.log('Hello')}>
                    <View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
                        <Text style={{ color:'white' }}>
                            Go back
                        </Text>
                    </View>
                </TouchableOpacity>
                <Button title="Go back button" onPress = {() => console.log('Hello')}>
                </Button>
            </View>
        );
    }
}

export default RaceScreen

Ответы [ 2 ]

1 голос
/ 23 февраля 2020

Я обнаружил, что компоненты Touchable обычно плохо реагируют на текстовые дочерние элементы. Вам просто нужно обернуть его внутри View: 

import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert}  from 'react-native';

export default class RaceScreen extends React.Component {

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
                <TouchableOpacity onPress = {() => console.log('Hello')}>
                    <View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
                        <Text style={{ color:'white' }}>
                            Go back
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}
0 голосов
/ 26 февраля 2020

Я наконец понял это. В методе createStackNavigator из response-navigation прозрачная карта: true является устаревшим свойством и вызывала ошибку. Я использовал документацию версии 3 для пакета версии 4 реагирующей навигации.

Глядя на этот сайт, они только что выпустили версию 5, и это здорово!

Примечание для менее опытных разработчиков, таких как я, убедившись, что вы знаете версию каждого пакета, который вы Использование имеет решающее значение для некоторых из этих сложных ошибок. Не позволяйте этому сбить вас с толку, реагируйте, что нативная элита!

...