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版，真是太好了！

给像我这样经验不足的开发人员的笔记，请确保您了解所使用的每个软件包的版本对于其中一些困难的bug至关重要。不过不要让它失望，反应原生是精英！

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

2 个答案: