Question

我的组件很小，正在尝试触发onPress函数。我首先尝试了以下操作：onPress = {this.slider}，但没有收到控制台日志，然后我尝试了onPress = {（）=> {this.slider}}，但仍然没有收到控制台日志。最后，我尝试了onPress = {console.log（“ Hello”）}，并收到了控制台日志。因此，我显然不能正确调用Slider函数。我不确定自己做错了什么-我确定这很愚蠢。感谢所有帮助。

class newWave extends Component {

    state = {
        format: "TTS"
    }

    slider = () => {
        console.log("hi");
        if (this.state.format === "TTS")
            this.setState({ format: "Voice" })
        else if (this.state.format === "Voice")
            this.setState({ format: "TTS" })
    }

    render() {

        return (
            <View style={{height:"100%", width: "100%", flexDirection:"column", justifyContent: "center", alignItems:"center"}}>
            <View style={{height: "75%", width:"75%", backgroundColor:"blue", borderRadius:20, flexDirection:"row", justifyContent:"flex-end"}}>
                <View style ={{backgroundColor:"transparent", height: "10%", width:"30%", margin: "2%"}}>
                <View style = {{backgroundColor:"orange", height: "100%", width:"100%", borderRadius: 20,  flexDirection:"row", justifyContent:this.state.format==="TTS"?"flex-start":"flex-end", alignItems:"center"}}>
                <View style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} onPress={()=>{this.slider}}></View>
                </View>
                </View>
            </View>
        </View>

        );
    }
}


export default newWave;

Answer 1

让我向您介绍TouchableOpacity。视图不提供onPress道具。

<TouchableOpacity onPress={()=> {
    this.slider();
    }
  }>
   <View style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} ></View>
</TouchableOpacity>

Answer 2

在React Native中，有三种方法可以调用onPress：TouchableNativeFeedback，TouchableHighlight和TouchableOpacity

因此，将视图包装在这三个视图中的任何一个内，这三个视图具有onPress道具。

Answer 3

使用TouchableOpacity的onPress()道具。

此外，React中还有two ways to bind callbacks。

使用公共类字段语法

const slider = () => {}

<TouchableOpacity onPress={this.slider}>
  ...
</TouchableOpacity>

使用箭头功能

function slider() {}

<TouchableOpacity onPress={() => this.slider()} />
  ...
</TouchableOpacity>

Answer 4

请尝试这个。这应该工作。 View并不包含onPress事件

    <Button 
title='Hello'
style = {{backgroundColor:"green", height: "98%", width:"75%", borderRadius: 20, marginLeft: "1%", marginRight: "1%"}} onPress={()=>{this.slider()}}>
</Button>

Answer 5

尝试以下代码：

<TouchableOpacity
  style={{
    backgroundColor: 'green',
    height: '98%',
    width: '75%',
    borderRadius: 20,
    marginLeft: '1%',
    marginRight: '1%',
  }}
  onPress={this.slider}
/>

我强烈建议您使用stylesheet来定义您的样式。

Answer 6

您需要使用<TouchableOpacity />包装要单击的视图，然后将onPress={}传递给TouchableOpacity，如下所示

<TouchableOpacity onPress={CALL_YOUR_FUNCTION_HERE}>
   <View .... /> //add your view here
</TouchableOpacity>

您还可以根据需要和条件使用<Button />中的<TouchableWithoutFeedback />或react-native。请参阅react-native文档，它以清晰的方式编写，您可以在其中找到所需的内容

onPress不触发功能

6 个答案: