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

Question

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

使用按钮也没有响应，我认为这可能是一个 react 导航问题？转换到屏幕没有问题吗？

这是我的屏幕；

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