Question

我想隐藏并显示当我按下每个TouchableOpacity时在列表中具有{param.body}的每个视图。但是，当我仅按一个时，所有的列表视图都隐藏并显示。如何只隐藏和显示一个视图？

每个视图中都有键值。

这是我的代码

const DOWN_ARROW = require('../assets/images/ic_arr_down.png');
const UP_ARROW = require('../assets/images/ic_arr_up.png');

export default class Schedule extends Component{
    constructor(props){
        super(props);
        this.state = {showbody : true, activeImage : true}
    }
    toggleBody = () =>{
        this.setState({showbody : !this.state.showbody, activeImage : !this.state.activeImage,})
    }
    data = {
        contents: [
            {
                date: '4/3',
                money: '$15000',
                body: 'this is component 1',
            },
            {
                date: '4/4',
                money: '$200000',
                body: 'this is component 2',
            },
        ]
    }
    render() {
        let arrowImage = this.state.activeImage ? DOWN_ARROW : UP_ARROW;
        return(
            <View style = {styles.container}>
                <ScrollView style={{alignSelf: 'stretch'}}>
                    {
                        this.data.contents ? this.data.contents.map((param, i) => {
                            return(
                                <View>
                                    <View style={styles.dropdown} key={i}>
                                        <Text style={{fontSize: 16}}>{param.date}</Text>
                                        <TouchableOpacity style={{backgroundColor: 'blue'}} onPress={this.toggleBody}>
                                             <Image source={arrowImage}/>
                                        </TouchableOpacity>
                                    </View>
                                    {this.state.showbody ? (<View><Text>{param.body}</Text></View>) : null}

                                </View>
                            );
                        })
                        : null
                    }
                </ScrollView>
            </View>
        )
    }
}

我希望当我在键为1的视图上按下图像时，包含{param.body}的右下视图会隐藏并显示。但是所有视图都是隐藏和显示的。：（

Answer 1

请按照以下步骤操作：- 1.取一个可变温度，该温度将在第一时间为空 2.现在，单击tochableopacity，将特定项目项存储在变量中。 3.显示视图的状态将是这样

this.state.temp == param.keyvalue？ “显示您的视图”：null

所以它将很容易工作。
我建议使用平面列表代替此列表。

Answer 2

尝试更改下一行

  {this.state.showbody ? (<View><Text>{param.body}</Text></View>) : null}

到

 {this.state.showbody && (<View><Text>{param.body}</Text></View>)}

这对我有用

Answer 3

这是大多数初学者开始在React / React Native中工作时面临的最常见的问题类型。您必须这样做。

1。保持变量activeItem的状态，该变量的名称保留当前的活动项。

2。像这样在循环内更新onPress变量。

 updateActiveItem=itemIndex=>{
   this.setState({activeItem:itemIndex})
 }
 ....
 ....
render(){
  return(
   <View>
     {
       someArrayofItems.map((item,index)=>{
         return(
           <View>
              <Touchable onPress={()=>this.updateActiveItem(index)}>
                ...
              </Touchable>
             {this.state.activeItem===index &&(SOME VIEW YOU WANT TO SHOW 
                 CONDITIONALLY)}
          </View>
        )
       }) 
     }
   </View>
  )
}

React Native如何使用键值隐藏和显示确切的一个视图

3 个答案: