可触摸的不透明度在堆栈导航器屏幕中没有响应-React Native

Question

我正在构建一个React Native应用程序，它使用了React Navigation。我在整个应用程序中都使用TouchableOpacity，但是，在堆栈导航器屏幕中，它似乎根本不起作用。触摸元素不会改变不透明度，并且onpress功能不起作用。屏幕本身显示正常，我的应用程序中的所有其他屏幕均具有正常工作的TouchableOpacity。

这是我的屏幕；

import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert}  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')
                    }}
                    style={{margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center'}}
                >
                    <Text style={{ color:'white'}}>
                        Go back
                    </Text>
                </TouchableOpacity>

            </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>
        );
    }
}