Question

新学习者，我在屏幕上有多个按钮，并且在同一容器内有另一个标签，单击后我想显示标签，然后在几秒钟后隐藏。

我通过this.state控制的问题是，事件触发时会显示所有标签，然后隐藏所有标签。我发现一些解决方案，例如分配ID等和按钮数组。

但是问题是可以有无限个按钮，所以这不是设置每个按钮状态的方法。或者，如果还有其他可能的方法。

    import React from 'react';
    import { StyleSheet, Text, View, TouchableOpacity, Dimensions } from 'react-native';

    export default class App extends React.Component {
    constructor(props) {
        super();

        this.state = {
            visible: false
        }
    }

    _handleClick = () => {
        this.setState({
            visible: !this.state.visible
        });
        setTimeout(() => {
            this.setState({
                visible: false
            });
        },2000);
    }
      render() {
    return (
      <View style={styles.container}>

        <View style={styles.item}>
            <TouchableOpacity onPress={this._handleClick}><Text>Button 1</Text></TouchableOpacity>
            {this.state.visible && <View style={styles.pic}>
                    <Text>Pic</Text>
                </View>
            }
        </View>

        <View style={styles.item}>
            <TouchableOpacity onPress={this._handleClick}><Text>Button 2</Text></TouchableOpacity>
            {this.state.visible && <View style={styles.pic}>
                    <Text>Pic</Text>
                </View>
            }
        </View>


        <View style={styles.item}>
            <TouchableOpacity onPress={this._handleClick}><Text>Button 3</Text></TouchableOpacity>
            {this.state.visible && <View style={styles.pic}>
                    <Text>Pic</Text>
                </View>
            }
        </View>

      </View>
    );
  }
}

    const styles = StyleSheet.create({
      container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
   },
    item: {
      width: Dimensions.get("screen").width / 2,
      height: 100,
      backgroundColor: "rgba(0,0,0,.5)",
      justifyContent: 'center',
      alignItems: 'center',
      position: 'relative',
      marginBottom: 1
  },
  pic: {
      position: 'absolute',
      right: 10,
      top: 10,
  }
});

Answer 1

您可以以最简单的方式使用条件。您可以调用这样的函数，并为检查条件传递参数。

   onPress={()=>this._handleClick("any flag")}

定义这样的功能

     _handleClick(flag) { 
        if(flag == 1) {
            this.setState({state:true})
        }
    }

react-native中的多个按钮，单击其中的一个

1 个答案: