时间戳

首页 > 解决方案 > react-native 中的多个按钮，单击

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

问题描述

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

我正在控制的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,
  }
});

标签： react-native

解决方案

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

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

像这样定义函数

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

推荐阅读