可觸摸不透明度在堆棧導航器屏幕中沒有響應 - React Native

Question

我正在構建一個 React Native 應用程序，它使用 React Navigation。 我在整個應用程序中都使用 TouchableOpacity，但是，在堆棧導航器屏幕中，它似乎根本不起作用。 觸摸元素不會改變不透明度，並且 onpress 功能不起作用。 屏幕本身顯示良好，我的應用程序中的所有其他屏幕都具有可以正常工作的 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

Answer 1

我發現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>
        );
    }
}

Answer 2

我終於弄明白了。 在 react-navigation 的 createStackNavigator 方法中，transparentCard:true 是一個已棄用的屬性，並導致了錯誤。 我在版本 4 的 React 導航包上使用了版本 3 文檔。

看看那里的網站，他們剛剛發布了第 5 版，這很棒！

對像我這樣經驗不足的開發人員的說明，確保您了解所使用的每個軟件包的版本對於其中一些困難的錯誤至關重要。 不要讓它讓你失望，反應本土是精英！