可触摸不透明度在堆栈导航器屏幕中没有响应 - 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 版包上使用第 3 版文档。

看看那里的网站，他们刚刚发布了很棒的第 5 版！

请注意像我这样经验不足的开发人员，确保您知道您正在使用的每个包的版本对于其中一些棘手的错误至关重要。不要让它让你失望，React Native 是精英！

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

Touchable Opacity not responding in stack navigator screen - React Native

javascript

reactjs

react-native

react-navigation

react-navigation-stack